Alerts

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

Instant Download of your Work

Print anywhere - anytime

Dedicated Live Support

Free Customization Service