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.
<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>
You can add the alert-link class to any links inside the alert box to create matching colored links.
<div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>
To close the alert message, add alert-dismissable class to the alert container and class="close" and data-dismiss="alert" to a link or a button element.
<div class="alert alert-success alert-dismissable"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> Indicates a successful or positive action. </div>
The fade and in classes adds a fading effect when closing the alert message:
<div class="alert alert-success alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> Indicates a successful or positive action. </div>
Leave a comment