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.
Provides a blue color representing an important task.
Provides a green color representing success.
Gives a light blue color indicating some information.
Provides a yellow color representing a warning.
Gives a red color indicating danger.
Provides a gray color representing a less important task.
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.
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.
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.
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.
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.
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.