Alerts Styles

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples - Default Style

Alerts are available for any length of text. Use .alert-{state} with .alert to create alert messages.

Order has been placed. Your will be redirect for make your payment.
Order has been placed. Your will be redirect for make your payment.
Thanks for your deposit. Your account balance has been updated accordingly.
Order has been placed. Your will be redirect for make your payment.
Your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.
Update failed! There is some technical issues.
Your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.
Your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.
Update failed! There is some technical issues.
Order has been placed. Your will be redirect for make your payment.
Order has been placed. Your will be redirect for make your payment.
Thanks for your deposit. Your account balance has been updated accordingly.
Order has been placed. Your will be redirect for make your payment.
Your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.
Update failed! There is some technical issues.
Your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.
Your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.
Update failed! There is some technical issues.
Class Reference Details
.alert-{state} Use {state} as primary, secondary, success, info, warning, danger, gray, light
.alert-icon Use with .alert class for proper icon style.
.alert-fill Use with .alert class for fill base style.
.alert-dismissible Use with .alert class for dismissible alert.
Code Example
<div class="alert alert-icon alert-primary" role="alert">
    <em class="icon ni ni-alert-circle"></em> 
    <strong>Order has been placed</strong>. Your will be redirect for make your payment. 
</div>
Code Example
<div class="alert alert-fill alert-icon alert-primary" role="alert">
    <em class="icon ni ni-alert-circle"></em> 
    <strong>Order has been placed</strong>. Your will be redirect for make your payment. 
</div>