Basic Alert

Use one of the four required contextual classes

Source Code

<div class="alert alert-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong class="d-block d-sm-inline-block-force">Well done!</strong> You successfully read this important alert message.
</div><!-- alert -->

Class Reference

Class	Values
class="alert alert-[value]"	success | info | warning | danger

Bordered Alert

Having a variation with bordered alert with very light background color.

Class Reference

Class	Values
class="alert alert-bordered alert-[value]"	success | info | warning | danger

Alert With Icons

Using icons inside an alert box.

Source Code

<div class="alert alert-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <div class="d-flex align-items-center justify-content-start">
    <i class="icon ion-ios-checkmark alert-icon tx-32 mg-t-5 mg-xs-t-0"></i>
    <span><strong>Well done!</strong> Successful alert message.</span>
  </div><!-- d-flex -->
</div><!-- alert -->

Bigger Alerts

Alert messages