Skip to main content

Alerts in Bootstrap 5

Bootstrap Alerts

Bootstrap alerts are a great way to display important information to your users.

They are designed to be attention-grabbing and can be easily customized to fit your website's design.

Here are some examples of how to use Bootstrap alerts:

Basic Alert

The most basic alert displays a message with a colored background. You can add the "alert" class to a div and then add one of the contextual classes to change the background color.

As an example:

Editor

Loading...

Dismissible Alert

You can add a dismiss button to an alert by adding the "alert-dismissible" class and a close button.

As an example:

Editor

Loading...

You can turn an alert into a link by wrapping it in an anchor tag and adding the "alert-link" class.

As an example:

Editor

Loading...

Alert with Icon

You can add an icon to an alert by using an icon font library, such as Font Awesome, and adding the icon class to the alert.

As an example:

Editor

Loading...

Alert with Heading

You can add a heading to an alert by wrapping the message in a "div" with the "alert-heading" class.

As an example:

Editor

Loading...