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

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

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

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

<div class="alert alert-info alert-with-border" role="alert">...</div>