Digital pattern library

Alerts

The alert pattern is used to provide contextual feedback messages for typical user actions and convey important information for users.


Options available


Success

Use the class .alert-success for a success alert box.

Code
<!-- 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 //-->

Info

Use the class .alert-info for an info alert box.

Code
<!-- 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 //-->

Warning

Use the class .alert-warning for a warning alert box.

Code
<!-- 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 //-->

Danger

Use the class .alert-danger for a danger alert box.

Code
<!-- 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 //-->