×

Status message

Demo Page: demos/alert-styles potentially unstable

Demo: Alert Styles

Custom:

×

Status message

Caution: site under construction
<div id="alert-caution-ex" class="alert alert-block alert-caution">
  <div class="alert-inner">
    <a class="close" data-dismiss="alert" href="#alert-caution-ex">×</a>
    <h4 class="element-invisible">Status message</h4>Caution: <em class="placeholder">site</em> under construction
  </div>
</div>
×

Status message

Demo Page: demos/alert-styles potentially unstable
<div id="alert-demo-ex" class="alert alert-block alert-demo">
  <a class="close" data-dismiss="alert" href="#alert-demo-ex">×</a>
  <h4 class="element-invisible">Status message</h4>Demo Page: <em class="placeholder">demos/alert-styles</em> potentially unstable
</div>

Defaults:

×

Status message

Alert for .alert-success example. This is good, and means something actually executed correctly!
<div class="alert alert-block alert-success">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="element-invisible">Status message</h4>
  Alert for <em class="placeholder">.alert-success</em> example. This is good, and means something actually executed correctly!
</div>
×

Status message

Alert for .alert-info example. This can be helpful or not apply to the current user.
<div class="alert alert-block alert-info">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="element-invisible">Status message</h4>
  Alert for <em class="placeholder">.alert-info</em> example. This can be helpful or not apply to the current user.
</div>
×

Status message

Alert for .alert-warning example. You may need to check something!
<div class="alert alert-block alert-warning">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="element-invisible">Status message</h4>
  Alert for <em class="placeholder">.alert-warning</em> example. You may need to check something!
</div>
×

Status message

Alert for .alert-danger example. Visible only to logged-in visitors by default, or those attempting to log in with incorrect credentials.
<div class="alert alert-block alert-danger" style="display:block">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="element-invisible">Status message</h4>
  Alert for <em class="placeholder">.alert-danger</em> example. Visible only to logged-in visitors by default, or those attempting to log in with incorrect credentials.
</div>