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