Bootstrap 4 Alerts
Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the
contextual classes .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Try it Yourself »
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links":
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Try it Yourself »
Closing Alerts
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).
Example
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Try it Yourself »
Tip: × (×) is an HTML entity that is the preferred icon for close
buttons, rather than the letter "x".
For a list of all HTML Entities, visit our HTML Entities Reference.
Animated Alerts
The .fade and .show classes adds a fading effect when
closing the alert message:
Complete Bootstrap 4 Alert Reference
For a complete reference of all alert options, methods and events, go to our Bootstrap 4 JS Alert Reference.