alerts
Alerts are available for any length of text and includes many type of alerts
You can removeborder-radius
fromalerts
and otherelements
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
A simple primary alert — check it out!
A simple secondary alert — check it out!
A simple gray 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 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 Dismissablealert
by simply adding.dismissable
class to.alert
and inside thealert
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
A simple primary alert — check it out!
A simple secondary alert — check it out!
A simple gray 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 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!!