Bootstrap Alerts
Alerts
Bootstrap provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the
four contextual classes .alert-success, .alert-info, .alert-warning or
.alert-danger:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative 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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Try it Yourself »
The aria-* attribute and × explanation
To
help improve accessibility for people using screen readers, you should include
the aria-label="close" attribute, when creating a close button.
× (×) 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 .in classes adds a fading effect when
closing the alert message:
Complete Bootstrap Alert Reference
For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.
Did You Know?
W3.CSS is an excellent alternative to Bootstrap.
W3.CSS is smaller, faster, and easier to use.
