Bootstrap 4 alert messages provide interactive information to users. These alert messages used for form validations and throwing messages on the browser. There are 8 types of alert boxes in bootstrap 4 using the following contextual classes.
- .alert-primary: These classes are used to create an alert with primary color.
- .alert-secondary: These classes are used to create an alert with secondary.
- .alert-success: These classes are used to create an alert with light green to indicate a positive action.
- .alert-info: These classes are used to create an alert Information message in sky-blue color.
- .alert-danger: These classes are used to create alert Messages for danger, stop or negative actions.
- .alert-warning: These classes are used to indicative warning messages.
- .alert-light: These classes are used to indicative lighter messages.
- .alert-dark: These classes are used to indicative darker messages.
Dismissible Alerts:
Generally, you will require closing the alerts by user action like using the ‘X’ symbol or automatically closing the alert after a certain interval.
The .alert-dismissible class is used within the .container class to close the alert messages. You also require including a button element with class=”close” and data-dismiss=“alert” attribute.
Fading Effect:
By using .fade and .show classes, you can add the fading effect of animation when closing the alert message.
Alerts with Links:
You simply need using one class in the links within alert i.e. .alert-link and it will make the link similar color (a little darker) as the color of contextual alert.