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