Elements: Alerts

<!-- Alert -->
<div class="alert alert-primary" role="alert">
    Heads up! This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<!-- /Alert -->

<!-- Alert -->
<div class="alert alert-secondary" role="alert">
    Heads up! This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<!-- /Alert -->

<!-- Alert -->
<div class="alert alert-success m-0" role="alert">
    Heads up! This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<!-- /Alert -->

<!-- Alert -->
<div class="alert alert-success" role="alert">
    <h4 class="alert-heading mb-3">Well done!</h4>
    <p class="mb-0">
        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>
<!-- /Alert -->

<!-- Alert -->
<div class="alert alert-warning alert-dismissible fade show m-0" role="alert">

    <!-- Alert Content -->
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <!-- /Alert Content -->

    <!-- Close Button -->
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <!-- /Close Button -->

</div>
<!-- /Alert -->