logologo-dark
logologo-dark

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.
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.
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>
Examples - Style Pro

For following style, You can use the .alert-pro class with .alert class.

Your Order Placed

Your order has been successfully placed for diposit. Your will be redirect for make your payment.

Your Order Placed

Your order has been successfully placed for diposit. Your will be redirect for make your payment.

Payment Successfully Made

Thanks for your deposit. Now you can see your transaction history. Your account has been updated accordingly.

Your Order Placed

Your order has been successfully placed for diposit. Your will be redirect for make your payment.

Payment Information

Sorry! your credit card already expired. Please enter a valid & up-to-date credit card for make deposit.

Order Cancelled

Your order has been cancelled due to received your payment.

Your Order Placed

Your order has been successfully placed for diposit. Your will be redirect for make your payment.

Your Order Placed

Your order has been successfully placed for diposit. Your will be redirect for make your payment.

Code Example
<div class="alert alert-pro alert-primary">    <div class="alert-text">        <h6>Your Order Placed</h6>        <p>Your order has been successfully placed for diposit. Your will  be redirect for make your payment. </p>    </div></div>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?