The alert pattern is used to provide contextual feedback messages for typical user actions and convey important information for users.
.alert
and one of the four contextual classes (e.g. .alert-success
) for an alert message..alert-link
class to quickly provide matching coloured links within any alert.Use the class .alert-success
for a success alert box.
<!-- Begin pattern: alerts //-->
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<!-- End pattern: alerts //-->
Use the class .alert-info
for an info alert box.
<!-- Begin pattern: alerts //-->
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs <a href="#" class="alert-link">your attention</a>, but it's not super important.
</div>
<!-- End pattern: alerts //-->
Use the class .alert-warning
for a warning alert box.
<!-- Begin pattern: alerts //-->
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<!-- End pattern: alerts //-->
Use the class .alert-danger
for a danger alert box.
<!-- Begin pattern: alerts //-->
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and <a href="#" class="alert-link">try submitting again</a>.
</div>
<!-- End pattern: alerts //-->