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 »
Closing Alerts
To close the alert message, add class="close"
and data-dismiss="alert"
to a link or a
button element:
Example
<div class="alert alert-success">
<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". |
Animated Alerts
The .fade
and .in
classes adds a fading effect when
closing the alert message:
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
Complete Bootstrap Alert Reference
For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.