Alerts

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>