Alerts

<div class="alert alert-primary" role="alert">
  <strong>Primary!</strong> This is a primary alert-check it out!
</div>
<div class="alert alert-secondary" role="alert">
  <strong>Secondary alert!</strong> This secondary alert is a new addition to the group.
</div>
<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-light" role="alert">
  <strong>Light alert!</strong> This is a light alert-check it out!
</div>
<div class="alert alert-dark" role="alert">
  <strong>Dark alert!</strong> This is a light alert-check it out!
</div>
<div class="alert alert-inverse" role="alert">
  <strong>Inverted!</strong> This inverse alert is another addition to the group.
</div>

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">I'm a header!</h4>
  <p><strong>Well done!</strong> You successfully read this important alert message that <a class="alert-link" href="#">includes a link</a>.</p>
  <hr>
  <p>You can use extra spacing using hr and paragraphs.</p>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  <strong>Close me!</strong> you can click the close button whenever you're ready.
</div>