Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.
Alerts are created with the .alert
class, followed by one of the
four contextual classes .alert-success
, .alert-info
, .alert-warning
or
.alert-danger
:
There are four classes that are used within <div> element for alerts.
Bootstrap 4 adds 4 new alerts in Bootstrap Alert defined in Bootstrap 3 tutorial.
These are:
Alerts are created with the .alert class, followed by one of the contextual classes.
List of all contextual classes:
Add the alert-link
class to any links inside the alert box to create "matching colored links":
To close the alert message, add a .alert-dismissible
class to the alert container. Then add class="close"
and data-dismiss="alert"
to a link or a button element (when you click on this the alert box will
disappear).
You can use .fade and .show classes to add a fading effect when closing the alert message. Example: