close

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
CustomExclusive

Custom alerts for better representation of title and text, also you can insert an image inside.

<div class="alert alert-custom" role="alert">
    <span>A simple custom alert with title and description...</span>
</div>

<div class="alert alert-custom" role="alert">
    <img src="...">
    <span>A simple custom alert with an image, title and description...</span>
</div>
State IndicatorExclusive

Stylish state indicators, use them accordingly with the alert's content.

<div class="alert alert-custom alert-indicator-top indicator-success" role="alert">
    <div class="alert-content">
        <span class="alert-title">Success!</span>
        <span class="alert-text">Custom alert with succes state indicator on top...</span>
    </div>
</div>
Bootstrap Default

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes.

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
    A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
</div>
IconExclusive

You can add icons instead of images to our custom alerts and also give them background colors according to their state.

<div class="alert alert-custom" role="alert">
    <img src="...">
    <span>A simple custom alert with an image, title and description...</span>
</div>
Light

Add .alert-style-light to .alert in order to use light-styled alerts as shown bellow. Also, note that .alert-secondary and .alert-light don't support this style.

<div class="alert alert-primary alert-style-light" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-secondary alert-style-light" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-success alert-style-light" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-danger alert-style-light" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-warning alert-style-light" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-info alert-style-light" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-dark alert-style-light" role="alert">
    A simple dark alert—check it out!
</div>
Rounded

Add .alert-rounded to .alert in order to use rounded alerts as shown bellow.

<div class="alert alert-primary alert-style-light" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-rounded alert-secondary alert-style-light" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-rounded alert-success alert-style-light" role="alert">
    A simple success alert—check it out!
</div>