Components

## 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>

##### 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.

###### 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>