BS Alerts
Alerts
Bootstrap provides an easy way to create predefined alert messages:
Alerts are produced 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>
Alert Links
Add the alert-link class to any links inside the alert box to produce “matching colored links”:
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts
To close the alert message, include the .alert-dismissible class in the alert container. Then, add class=”close” and data-dismiss=”alert” to a link or button element (when clicked, the alert box disappears).
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>
The aria-* attribute and × explanation
When developing a close button, use the aria-label=”close” attribute to increase accessibility for users who use screen readers.
The HTML entity × (×) is the preferred icon for close buttons, replacing the letter “x”.
Our HTML Entities Reference contains a complete list of all HTML Entities.
Animated Alerts
The .fade and .in classes create a fading effect when the alert message is closed.
Example
<div class="alert alert-danger fade in">
