Baisc Alert
in order to use the alerts boxes simply create an html element and give it class name alert and inside of it you can write your alert message and for make it dismissal you can add an hyper-link element and name it remove-item see the example below
Default Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<div class="alert">
<b>Default Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<a href="#" class="ti-close remove-item"></a>
</div>
Colored Alerts
for coloring alert boxes you can use the class sucess,danger,info,dark,warning.
Success Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Danger Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Warning Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Info Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Dark Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<div class="alert success">
<b>Success Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<a href="#" class="ti-close remove-item"></a>
</div>
<div class="alert danger">
<b>Danger Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<a href="#" class="ti-close remove-item"></a>
</div>
<div class="alert warning">
<b>Warning Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<a href="#" class="ti-close remove-item"></a>
</div>
<div class="alert info">
<b>Info Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<a href="#" class="ti-close remove-item"></a>
</div>
<div class="alert dark">
<b>Dark Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<a href="#" class="ti-close remove-item"></a>
</div>
Utilities
Class Name | Element | Description |
---|---|---|
alert | alert box | Main Class for The Alert Box |
remove-item | button element | Dismissal Alert Button |
success | alert box | Coloring Alert with The Success Theme Color. |
danger | alert box | Coloring Alert with The Danger Theme Color. |
warning | alert box | Coloring Alert with The Warning Theme Color. |
info | alert box | Coloring Alert with The Info Theme Color. |
dark | alert box | Coloring Alert with The Dark Theme Color. |