Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam.
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
.alert
.alert-success
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
<div class="alert alert-success">...</div> <div class="alert alert-info">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-danger">...</div>
Build on any alert by adding an optional .alert-dismissable and close button.
.alert-dismissable
<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
Be sure to use the <button> element with the data-dismiss="alert" data attribute.
<button>
data-dismiss="alert"
Use the .alert-link utility class to quickly provide matching colored links within any alert.
.alert-link
<div class="alert alert-success"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">...</a> </div>