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.
Example:
<div class="alert alert-success"> Success alert </div>
<div class="alert alert-info"> Info alert </div>
<div class="alert alert-warning"> Warning alert </div>
<div class="alert alert-danger"> Danger alert </div>
<div class="alert alert-light"> Light alert </div>
<div class="alert alert-dark"> Dark alert </div>
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.
Example:
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> × </button>
Success alert </div><div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> × </button>
Info alert </div><div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> × </button>
Warning alert </div><div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> × </button>
Danger alert </div><div class="alert alert-light alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> × </button>
Light alert </div><div class="alert alert-dark alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> × </button>
Dark alert </div>Fading Effect:
By using .fade and .show classes, you can add the fading effect of animation when closing the alert message.
Example:
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Success alert </div><div class="alert alert-info alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Info alert </div><div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Warning alert </div><div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Danger alert </div><div class="alert alert-light alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Light alert </div><div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Dark alert </div>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.
Example:
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Success alert <a href="#" class="alert-link"> read this text </a> </div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Info alert <a href="#" class="alert-link"> read this text </a> </div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Warning alert <a href="#" class="alert-link"> read this text </a> </div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Danger alert <a href="#" class="alert-link"> read this text </a> </div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Light alert <a href="#" class="alert-link"> read this text </a> </div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert"> × </button>
Dark alert <a href="#" class="alert-link"> read this text </a> </div>