Alert messages are useful for the websites every now and then.
They might indicate some failed validation or notify a successful registration for the user.
Either way, their appearance is an important aspect to work on.
Bootstrap 4 has many features for Alert Messages as well.
It provides the developers some easy ways in which they can create and style predefined alert messages.
The class, generally, used for the Alerts is the .alert class.
There are 4 contextual classes that can be used for different types of alerts:
.alert-success: Background color – Green. Any positive ‘successful’ action can be notified using this alert.
.alert-info: Background color – Light-blue. This is just an information that the user needs to be notified about.
.alert-warning: Background color – Yellow. This is different from alert-danger as this can be used to suggest some caution to avoid any potentially negative action rather than notifying it.
.alert-danger: Background color – Red. This indicates any dangerous i.e. potentially negative action.
Here’s the sample code for using these classes:
Alert Success <div class="alert alert-success">
1 2 3 | <div class="alert alert-success"> <strong>Success!</strong> This is a successful alert indicating a positive action. </div> |
Alert Success <div class="alert alert-info">
1 2 3 | <div class="alert alert-info"> <strong>Info!</strong> This is an informative alert indicating a neutral change or action. </div> |
Alert Success <div class="alert alert-warning">
1 2 3 | <div class="alert alert-warning"> <strong>Warning!</strong> This is a warning alert indicating some action that might need your attention. </div> |
Alert Success <div class="alert alert-danger">
1 2 3 | <div class="alert alert-danger"> <strong>Danger!</strong> This is a danger alert indicating some potentially negative action. </div> |
Apart from these 4, there are some other classes that can be used for different purposes with alerts. Let’s have a look
Bootstrap Alert Links
You can add some matching links with matching foreground and background colors using the .alert-link class.
This links can be used to redirect the user to some detailed information about the alert.
1 2 3 | <div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> |
Bootstrap Closing Alerts
In some cases, the user may want to remove the alert ones they have addressed it.
This can be done by using dismissible or closable alerts.
In order to do
You also need to add class="close" and data-dismiss= to some link or a button element.
Therefore, when you click on this element the alert box will disappear.
Here’s the code to understand this better:
1 2 3 4 | <div class="alert alert-success alert-dismissible"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> Indicates a successful or positive action. </div> |
Observe the ‘aria-label’ and ‘×’ in the above code.
These two have an important role in this code. The aria-label= “close” attribute is there to have a better accessibility for the close button.
The ‘×’ or the (×) is actually a better and more preferable way of indicating the close button instead of using the ‘x’ symbol.
Bootstrap Animated Alerts
The two classes used to add an animated fade effect for when closing the alert messages are .fade and .in.
Bootstrap Close Alerts via data-* Attributes
Another way of creating a dismissible alert is by using the data-dismiss= attribute to any link or button element.
Just like the .alert-dismissible class, this too shall close the alert message using the link/button element.
Sample code:
1 | <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> |