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.
  1. <div class="alert">
  2. <button type="button" class="close" data-dismiss="alert">&times;</button>
  3. <strong>Warning!</strong> Best check yo self, you're not looking too good.
  4. </div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

  1. <a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

  1. <button type="button" class="close" data-dismiss="alert">&times;</button>

Dismiss alerts via JavaScript

Use the alerts jQuery plugin for quick and easy dismissal of alerts.


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.

  1. <div class="alert alert-block">
  2. <button type="button" class="close" data-dismiss="alert">&times;</button>
  3. <h4>Warning!</h4>
  4. Best check yo self, you're not...
  5. </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.
  1. <div class="alert alert-error">
  2. ...
  3. </div>

Success

Well done! You successfully read this important alert message.
  1. <div class="alert alert-success">
  2. ...
  3. </div>

Information

Heads up! This alert needs your attention, but it's not super important.
  1. <div class="alert alert-info">
  2. ...
  3. </div>