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.

Welcome back! A simple custom alert with title and description...
Welcome back! A simple custom alert with an image, title and description...

    <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.

Success! Custom alert with succes state indicator on top...
Danger! Custom alert with danger state indicator on bottom...
Info! Custom alert with info state indicator on left...
Warning! Custom alert with warning state indicator on right...

    <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.

A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!

    <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.

done
Successfully added 4 accounts A custom alert with icon...
done
Successfully added 4 accounts A custom alert with icon...
done
Successfully added 4 accounts A custom alert with icon...
done
Successfully added 4 accounts A custom alert with icon...
done
Successfully added 4 accounts A custom alert with icon...
done
Successfully added 4 accounts A custom alert with icon...

    <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.

A simple primary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple dark alert—check it out!

    <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.

A simple primary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!

    <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>