Alerts in Bootstrap 5 | Explained

Alerts are basically messages or pieces of certain information that require immediate attention of a user. These can be confirmation messages that pop up when a user request is processed or a certain task is completed, warning messages that alert users about certain tasks requiring attention, or error messages that occur as a result of an error.

Giving these alert messages a certain style is also important because that style plays an important role in conveying the meaning behind the message. In Bootstrap 5 you can perform this task using various classes that have been discussed in this report.

Making Alert Messages Using Bootstrap 5

To create an alert message in Bootstrap 5 use the .alert class in combination with the color classes provided to represent the meaning of the alert message. The color classes that can be utilized along with the .alert class are listed below.

1. .alert-primary

Provides a blue color representing an important task.

2. .alert-success

Provides a green color representing success.

3. .alert-info

Gives a light blue color indicating some information.

4. .alert-warning

Provides a yellow color representing a warning.

5. .alert-danger

Gives a red color indicating danger.

6. .alert-secondary

Provides a gray color representing a less important task.

7. .alert-light

Gives a light gray color to the message.


Provides a dark gray color to the message.

Let’s create an alert message using Bootstrap 5.

How to generate a confirmation message alert using Bootstrap 5

Suppose you want to generate a confirmation message when a user request is processed successfully.


<div class="container">

<div class="alert alert-success">

<strong>Processed Successfully!</strong> Your request has been processed successfully.



The code above will generate a confirmation alert informing the user that the request made was processed successfully.


A confirmation message was generated successfully.

How to generate an error message alert using Bootstrap 5

Suppose you want to generate an error message when a user request is denied.


<div class="container">

<div class="alert alert-danger alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Invalid!</strong> Your request has been denied.



In the code snippet, note that apart from assigning the message the .alert-danger class we are also assigning the .alert-dismissible class along with a button having class .btn-close and data-bs-dismiss=“alert”. All three of these entities contribute to making an alert message that can be closed by the user.


A dismissable error message was generated.

Creating Alerts as Links

If you desire to make your alert messages as links and direct your users to another page or source through those links then use the .alert-link class to do so.


Suppose you want to redirect your user to another web page then follow the code snippet below.


<div class="container">

<div class="alert alert-info">

Check out our <a href="#" class="alert-link"><strong>other offer</strong></a>.



Here we are using the .alert-info class to indicate some information contained in the alert message. Moreover, as you can notice that we are linking some piece of the message to another web page by assigning the .alert-link class to the anchor tag.


An alert message has been linked to another source.

Animating Alerts

You can also add animations to your alert messages such as include a fading effect using the .fade and .show classes.


Here is how you can add a fading effect to your alert messages.


<div class="alert alert-warning alert-dismissible fade show">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Do not click the link while the request is processing</strong>


The code above states that the alert message will be a warning and will be dismissible. Moreover, when the user closes the message then it will have a fading effect.


The alert was successfully animated.


Alerts are basically messages or pieces of certain information that require immediate attention of a user. In Bootstrap 5, you can create alerts using the .alert class, moreover, to convey its meaning through colors using the color classes available. Furthermore, using the classes provided by Bootstrap 5 you can make your alerts dismissable or animate them. This report discusses alerts in Bootstrap 5 in detail.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.