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

Having a bigger size to emphasize an alert

Source Code

<div class="alert alert-danger alert-bordered pd-y-20" 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-close alert-icon tx-52 tx-danger mg-r-20"></i>
    <div>
      <h5 class="mg-b-2 tx-danger">Oh snap! Change a few things up and try submitting again.</h5>
      <p class="mg-b-0 tx-gray">Neque porro quisquam est, qui dolorem ipsum...</p>
    </div>
  </div><!-- d-flex -->
</div><!-- alert -->