What are Bootstrap 4 Alerts?

Introduction

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.

Creating an alert in Bootstrap

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:

1. .alert-success: This indicates a successful action.
2. .alert-info: This indicates an informative action.
3. .alert-primary: This indicates an important action.
4. .alert-secondary: This indicates a less important action.
5. .alert-danger: This indicates a negative action.
6. .alert-warning: This indicates an action that needs an important attention.
7. .alert-gray- This is a dark gray box.
8. .alert-light: This is a light grey box.

Additional Features

Two basic additional features will be explained here. These are:

• Alert Closing
• Animated Alert

Alert closing

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 .close and data-dismissible="alert" to the link or the button inside the container. Whenever the user clicks on it, the alert dismisses.

Animated alert

This can be achieved by simply adding the class .fade and .show to the container. A fading effect will be added to the alert.

Explanation

• Lines 8 - 14: This is our alert code section.
• Line 8: A container is created with alert classes explained in the sections above. This creates an alert box with all the functions included in the classes.
• Line 9: A button with the classes close and data-dismiss="alert" is created. This button can be used to dismiss the alert.
• Line 10: An h4 element with class alert-heading is included. This creates a header for our alert.
• Lines 11 - 13: These lines contain the content of the alert.

Click on the dismiss button to test the functions.