Examples
Default styling
Take note of this important alert message.
alert-success
Something good or successful
Take note of this important alert message.
alert-info
Something worth noting, but not super important
Take note of this important alert message.
alert-warning
Something to note, may require attention
Take note of this important alert message.
alert-danger
Something important. Usually signifies an error.
Take note of this important alert message.
<div class="alert [modifier class]">
Take note of this <a href="#">important</a> alert message.
</div>
Example
Use
alert-dismissable and a close button to indicate an alert
that can be dismissed via JavaScript.
Show Markup
<div class="alert alert-warning alert-dismissable">
<button class="close" data-dismiss="alert" aria-hidden="true">×</button>
Use <code>alert-dismissable</code> and a <code>close</code> button to indicate an alert
that can be dismissed via JavaScript.
</div>12.1 #Alerts.Container Alert Container
alert-container
Stack multiple alerts closely together with an alert-container.
Example
Alert one
Alert two
<div class="alert-container">
<div class="alert alert-info alert-dismissable">
<button class="close" data-dismiss="alert" aria-hidden="true">×</button>
Alert one
</div>
<div class="alert alert-warning alert-dismissable">
<button class="close" data-dismiss="alert" aria-hidden="true">×</button>
Alert two
</div>
</div>12.2 #Alerts.Fixed Alert Fixed
alert-fixed-top
Affix an alert to the top of the page with alert-fixed-top. If your page has a navbar-fixed-top, this must be placed immediately before it to prevent overlapping.
Example
For the best experience on theice.com, please update your browser.
<div class="alert alert-fixed-top alert-info">
For the best experience on theice.com, please <a href="#">update your browser</a>.
</div>12.3 #Alerts.Business Business Alerts
alert-business
This alert works standalone, or affixed to the top of the page. Wrap one or more Business Alerts with alert-business-fixed to affix them to the top of the page. On pages with a top navbar, add is-under-navbar to the container to position it beneath the navbar.
Example
<div class="alert-business">
<a href="#">Market Status Alert</a>
</div>
Example
Show Markup
<div class="alert-business-fixed">
<div class="alert-business">
<a href="#">Market Status Alert</a>
</div>
<div class="alert-business">
<a href="#">News Alert</a>
</div>
</div>