# Alerts

Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-brand">
       <strong>Heads up!</strong> This alert needs <a class="alert-link" href="#">your attention</a>, but it's not super important.
    </div>
    <div class="alert alert-primary">
       <strong>Well done!</strong> You successfully <a class="alert-link" href="#">read this</a> important alert message.
    </div>
    <div class="alert alert-secondary">
       <strong>Well done!</strong> You successfully <a class="alert-link" href="#">read this</a> important alert message.
    </div>
    <div class="alert alert-success">
       <strong>Well done!</strong> You successfully <a class="alert-link" href="#">read this</a> important alert message.
    </div>
    <div class="alert alert-info">
       <strong>Heads up!</strong> This alert needs <a class="alert-link" href="#">your attention</a>, but it's not super important.
    </div>
    <div class="alert alert-warning">
       <strong>Warning!</strong> Better check yourself, <a class="alert-link" href="#">you're not</a> looking too good.
    </div>
    <div class="alert alert-danger">
       <strong>Oh snap!</strong> Change a few things up and try <a class="alert-link" href="#">submitting</a> again.
    </div>
    <div class="alert alert-light">
       <strong>Oh snap!</strong> Change a few things up and try <a class="alert-link" href="#">submitting</a> again.
    </div>
    <div class="alert alert-dark">
       <strong>Oh snap!</strong> Change a few things up and try <a class="alert-link" href="#">submitting</a> again.
    </div>

    +Alert("alert-brand")
    +Alert("alert-primary")
    +Alert("alert-secondary")
    +Alert("alert-success")
    +Alert("alert-info")
    +Alert("alert-warning")
    +Alert("alert-danger")
    +Alert("alert-light")
    +Alert("alert-dark")