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>
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam.