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.
8..alert-dark
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.
HTML
The code above will generate a confirmation alert informing the user that the request made was processed successfully.
Output
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.
HTML
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.
Output
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.
Example
Suppose you want to redirect your user to another web page then follow the code snippet below.
HTML
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.
Output
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.
Example
Here is how you can add a fading effect to your alert messages.
HTML
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.
Output
The alert was successfully animated.
Conclusion
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.
