Alert Boxes

Alert Boxes are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.

Basic

Use the following markup to create an alert box.

This is a standard alert. ×
<!-- Example alert -->
<div class="alert-box">
    <!-- Alert content goes here -->
    This is a standard alert.
    <a href="#" class="close">&times;</a>
</div>

Alert Colors

Contextual Colors

Depending on the context or message of your alert, you may want to use one of the following alert-boxes:

This is a success alert. ×
This is a warning alert. ×
This is an info alert. ×
This is an "alert" - alert. ×
<div data-alert class="alert-box success">
    This is a success alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box warning">
    This is a warning alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box info">
    This is an info alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box alert">
    This is an "alert" - alert.
    <a href="#" class="close">&times;</a>
</div>

Primary / Secondary Colors

The alert-boxes are also available to be colored with the default primary and secondary colors.

This is a default alert. ×
This is a secondary alert. ×
<div data-alert class="alert-box">
    This is a default alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box secondary">
    This is a secondary alert.
    <a href="#" class="close">&times;</a>
</div>