Alerts Styles for success, warning, and error messages

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

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

<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.

<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.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</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

<div class="alert alert-error">
  ...
</div>
              

Success

<div class="alert alert-success">
  ...
</div>
                

Information

<div class="alert alert-info">
  ...
</div>