Bootstrap provides us with many easy ways to draw attention to our website. One of these options is the Bootstrap Alert.
Alert boxes emphasize information that requires the immediate attention of the end-users. These include warning, error, or confirmation messages.
An alert can be created by wrapping content inside a
div with the class
.alert. This is followed by one of the eight contextual classes provided by bootstrap. These classes are as follows:
.alert-success: This indicates a successful action.
.alert-info: This indicates an informative action.
.alert-primary: This indicates an important action.
.alert-secondary: This indicates a less important action.
.alert-danger: This indicates a negative action.
.alert-warning: This indicates an action that needs an important attention.
.alert-gray- This is a dark gray box.
.alert-light: This is a light grey box.
Two basic additional features will be explained here. These are:
An alert will appear like a message on our screen that needs immediate attention. This means the user needs to close it once it is no longer needed.
Simply add the
.alert dismissible class to the container to close the alert. In addition, add the class
data-dismissible="alert" to the link or the button inside the container. Whenever the user clicks on it, the alert dismisses.
This can be achieved by simply adding the class
.show to the container. A fading effect will be added to the alert.
alertclasses explained in the sections above. This creates an alert box with all the functions included in the classes.
data-dismiss="alert"is created. This button can be used to dismiss the alert.
alert-headingis included. This creates a header for our alert.
Click on the dismiss button to test the functions.
View all Courses