Alert
Usage
Alerts are available for any length of text and includes many type of alerts
You can removeborder-radiusfrom alerts and other elements just adding.radius-noneclass
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 styles
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!
Dismissable
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>
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!
<!-- Primary -->
<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>
<!-- Secondary -->
<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>
<!-- Gray -->
<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>
<!-- Success -->
<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>
<!-- Danger -->
<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>
<!-- Warning -->
<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>
<!-- Info -->
<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>
<!-- Dark -->
<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>
Contact us
Report Bug
Request Feature
Submit Work