Default Functionality
<div class="alert alert-secondary" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-danger" role="alert">...</div><div class="alert alert-warning" role="alert">...</div><div class="alert alert-info" role="alert">...</div><div class="alert alert-dark m-b-0" role="alert">...</div>
Alert Link
<div class="alert alert-success" role="alert"> A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
Additional Content
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
<div class="alert alert-danger alert-dismissible" role="alert">A simple danger alert—check it out! <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <i class="ti-close"></i> </button></div>
Alert Icon
<div class="alert alert-success d-flex align-items-center" role="alert"> <i class="ti-check mr-2"></i> A simple success alert—check it out!</div><div class="alert alert-warning d-flex align-items-center" role="alert"> <i class="ti-help-alt mr-2"></i> A simple warning alert—check it out!</div>
Border Style
<div class="alert alert-info alert-with-border" role="alert">...</div>