alerts

Alerts are available for any length of text and includes many type of alerts

You can remove border-radius from alerts and other elements just adding .radius-none class

Regular Alerts

You can create an alert by simply adding class .alert and represent the alert type using classes of background, For Example: .success

<div class="alert success">
    An Alert
</div>

Available Alerts

<div class="alert primary" role="alert">
    A simple primary alert — check it out!
</div>

<div class="alert secondary" role="alert">
    A simple secondary alert — check it out!
</div>

<div class="alert gray" role="alert">
    A simple gray alert — check it out!
</div>

<div class="alert success" role="alert">
    A simple success alert — check it out!
</div>

<div class="alert danger" role="alert">
    A simple danger alert — check it out!
</div>

<div class="alert warning" role="alert">
    A simple warning alert — check it out!
</div>

<div class="alert info" role="alert">
    A simple info alert — check it out!
</div>

<div class="alert dark" role="alert">
    A simple dark alert — check it out!
</div>

Dismissable Alerts

You can create Dismissable alert by simply adding .dismissable class to .alert and inside the alert add .alert-close button, example shown below.
<div class="alert primary dismissable">
    A simple primary alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

Available Dismissable Alerts

<div class="alert primary dismissable" role="alert">
    A simple primary alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert secondary dismissable" role="alert">
    A simple secondary alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert gray dismissable" role="alert">
    A simple gray alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert success dismissable" role="alert">
    A simple success alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert danger dismissable" role="alert">
    A simple danger alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert warning dismissable" role="alert">
    A simple warning alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert info dismissable" role="alert">
    A simple info alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

<div class="alert dark dismissable" role="alert">
    A simple dark alert — check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close"><i class="fa fa-close"></i></div>
</div>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Page Content