notifications

Variations

Default

Notifications

You can see the markup below:

<div role="alert" class="alert alert-success">see what other people say!</div>

Helper classes: 1. alert-success 2. alert-info 3. alert-warning 4. alert-danger 5. alert-dark 6. alert-gray

These classes can be used with all other variations.

With Icons

With Icons

An icon would be added to the markup:

 <div role="alert" class="alert alert-warning">
    <i class="oli oli-info"></i>see what other people say!
 </div>

With Big Icons

With Big Icons

It is represented by with-big-icons class as below:

<div role="alert" class="alert with-big-icons alert-danger">
    <i class="oli oli-ok-filled"></i>see what other people say!
</div>

Thin

Thin With Big Icons

It is represented by alert-thin class. You can use it with any other variations.