Alert messages

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

<div class="alert alert-primary mb-0" role="alert">
    A simple primary alert—check it out!
</div>

<div class="alert alert-secondary mb-0" role="alert">
    A simple secondary alert—check it out!
</div>

<div class="alert alert-success mb-0" role="alert">
    A simple success alert—check it out!
</div>

<div class="alert alert-danger mb-0" role="alert">
    A simple danger alert—check it out!
</div>

<div class="alert alert-warning mb-0" role="alert">
    A simple warning alert—check it out!
</div>

<div class="alert alert-info mb-0" role="alert">
    A simple info alert—check it out!
</div>

<div class="alert alert-light mb-0" role="alert">
    A simple light alert—check it out!
</div>

<div class="alert alert-dark mb-0" role="alert">
    A simple dark alert—check it out!
</div>