# Alert messages

{% hint style="info" %}
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., <mark style="color:red;">`.alert-success`</mark>).
{% endhint %}

```html
<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>
```
