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 ReferenceDetails
.alert-{state}Use {state} as primary, secondary, success, info, warning, danger, gray, light
.alert-iconUse with .alert class for proper icon style.
.alert-fillUse with .alert class for fill base style.
.alert-dismissibleUse 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>
Switch Demo Layout
Use Case Concept
Preview Settings
Main UI Style
Default
Clean
Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Looking for Coronavirus Real & Live Data Tracking Dashboard? Check out
CovStats
Looking for Coronavirus
Live Data Dashboard?