Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Basic Alert
Use one of the four required contextual classes
Well done!You successfully read this important alert message.
Heads up!This alert needs your attention, but it's not super important.
Warning!Better check yourself, you're not looking too good.
Oh snap!Change a few things up and try submitting again.
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 -->
Alert With Icons
Using icons inside an alert box.
Well done!Successful alert message.
Heads up!This alert needs your attention.
Warning!Better check yourself.
Oh snap!Error alert message.
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 -->
Bigger Alerts
Having a bigger size to emphasize an alert
Well done! You successfully read this important alert message.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Heads up! This alert needs your attention, but it's not super important.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Warning! Better check yourself, you're not looking too good.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Oh snap! Change a few things up and try submitting again.
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 -->
