Default alert
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
Warning! Best check yo self, you're not looking too good.
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Options
For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Warning!</h4>
Best check yo self, you're not...
</div>
Contextual alternatives
Add optional classes to change an alert's connotation.
Error or danger
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
...
</div>
Success
Well done! You successfully read this important alert message.
<div class="alert alert-success">
...
</div>
Information
Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
...
</div>