Alerts

<!-- Secondary Alert -->
<div class="alert alert-secondary alert-dismissible fade show">
  <span class="alert-close" data-dismiss="alert"></span>
  <h3>Hello World!</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minus sint optio explicabo eum perspiciatis ipsam adipisci, excepturi repellendus debitis <a href='#'>fugit laborum quae</a>, aspernatur ex neque hic nihil, reiciendis veritatis.</p>
</div>

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible fade show text-center">
  <span class="alert-close" data-dismiss="alert"></span>
  <i class="fe-icon-bell"></i>
  &nbsp;&nbsp;<strong>Primary alert:</strong> Deserunt praesentium laboriosam <a href='#'>quaerat mollitia.</a>
</div>

<!-- Accent Alert -->
<div class="alert alert-accent alert-dismissible fade show text-center">
  <span class="alert-close" data-dismiss="alert"></span>
  <i class="fe-icon-clock"></i>
  &nbsp;&nbsp;<strong>Accent alert:</strong> Deserunt praesentium laboriosam <a href='#'>quaerat mollitia.</a>
</div>

<!-- Info Alert -->
<div class="alert alert-info alert-dismissible fade show text-center">
  <span class="alert-close" data-dismiss="alert"></span>
  <i class="fe-icon-info"></i>
  &nbsp;&nbsp;<strong>Info alert:</strong> Deserunt praesentium laboriosam <a href='#'>quaerat mollitia.</a>
</div>

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible fade show text-center">
  <span class="alert-close" data-dismiss="alert"></span>
  <i class="fe-icon-check-square"></i>
  &nbsp;&nbsp;<strong>Success alert:</strong> Deserunt praesentium laboriosam <a href='#'>quaerat mollitia.</a>
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible fade show text-center">
  <span class="alert-close" data-dismiss="alert"></span>
  <i class="fe-icon-alert-triangle"></i>
  &nbsp;&nbsp;<strong>Warning alert:</strong> Deserunt praesentium laboriosam <a href='#'>quaerat mollitia.</a>
</div>

<!-- Danger Alert -->
<div class="alert alert-danger alert-dismissible fade show text-center">
  <span class="alert-close" data-dismiss="alert"></span>
  <i class="fe-icon-slash"></i>
  &nbsp;&nbsp;<strong>Danger alert:</strong> Deserunt praesentium laboriosam <a href='#'>quaerat mollitia.</a>
</div>

<!-- Alert with Background Image -->
<div class="alert alert-image-bg alert-dismissible fade show text-center py-5" style="background-image: url(path-to-image)">
  <span class="alert-close text-white" data-dismiss="alert"></span>
  <i class="d-blocki fe-icon-clock text-white my-3" style="font-size: 50px;"></i>
  <div class="h3 text-medium text-white text-shadow">Check our Limited Offers.</div>
  <div class="h4 text-white font-weight-normal text-shadow">Save up to 50%</div>
  <div class="py-3"><a class="btn btn-gradient" href="#">View Offers</a></div>
</div>