Hit enter after type your search item

How to Create Bootstrap 5 Alerts: Explained with 5 Examples

A little about Bootstrap 5 Alerts

The alert is a way of communicating with the users of your website. A contextual feedback message can be displayed to the user by using the Bootstrap 5 built-in component, easily.

For example, you may display an alert as a warning that is orange in color. Similarly, a critical message can be given .danger- class that is red in color, and a success message (the record is saved, for example) can be displayed in green.

Quick Online Demos:

Contextual classes, Alert with colored links, Icons, Close alert by the cross, Bootstrap icons in alerts

See the examples below for creating alerts with various options.

The example of alerts with contextual classes

In this example, we utilized available contextual classes (for colors) to create alerts in Bootstrap 5. For each alert, the main .alert class is used as follows:

Bootstrap-5-alerts

See online demo and code

The example with a link color in alerts

You may add links in the message of alerts and to match the color, utilize the available class for links i.e. alert-link. This will match the color according to the contextual class given for the main alert. See the code and output below:

Bootstrap-5-alerts-link

See online demo and code

The example of alerts with Icons

In this example, the alerts are created with an icon using various contextual classes.

Bootstrap-5-alerts-icon

See online demo and code

The example of alerts with the cross to close alert

In this example, various colored alerts are created with the cross button towards the right side. By clicking on that, the alert will be dismissed. For that, just add the .alert-dismissible class in the container:

Bootstrap-5-alerts-dismiss

See online demo and code

Another example of Bootstrap 5 alerts with icons

In this example, the alerts are created with icons inside. For that, bootstrap-icons.css is added in the head section.

Bootstrap-5-alerts-icon

See online demo and code


For a complete available icons list, go to this link: https://icons.getbootstrap.com/
This div height required for enabling the sticky sidebar