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">×</span>
</button>
<strong class="d-block d-sm-inline-block-force">Well done!</strong> You successfully read this important alert message.
</div><!-- alert -->
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">×</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 -->
Having a bigger size to emphasize an alert
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
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">×</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 -->