# Alerts

## Alerts

### Shortcode alerts

<div class="alert alert-primary" role="alert"><div class="h4 alert-heading" role="heading">Primary alert heading</div>


A simple primary alert.
</div>


<div class="alert alert-secondary" role="alert"><div class="h4 alert-heading" role="heading">Secondary alert heading</div>


A simple secondary alert.
</div>


<div class="alert alert-success" role="alert"><div class="h4 alert-heading" role="heading">Success alert heading</div>


A simple success alert.
</div>


<div class="alert alert-danger" role="alert"><div class="h4 alert-heading" role="heading">Danger alert heading</div>


A simple danger alert.
</div>


<div class="alert alert-warning" role="alert"><div class="h4 alert-heading" role="heading">Warning alert heading</div>


A simple warning alert.
</div>


<div class="alert alert-info" role="alert"><div class="h4 alert-heading" role="heading">Info alert heading</div>


A simple info alert.
</div>


<div class="alert alert-light" role="alert"><div class="h4 alert-heading" role="heading">Light alert heading</div>


A simple light alert.
</div>


<div class="alert alert-dark" role="alert"><div class="h4 alert-heading" role="heading">Dark alert heading</div>


A simple dark alert.
</div>


<div class="alert alert-primary" role="alert">

 A _nota bene_ alert. </div>


<div class="alert alert-primary text-center" role="alert"><div class="h4 alert-heading" role="heading">Centered note</div>


Illustrating use of custom classes via the `color` parameter.
</div>


### Blockquote alerts

> [!NOTE] Primary alert heading
>
> A simple primary alert.

> [!SECONDARY] Secondary alert heading
>
> A simple secondary alert.

> [!TIP] Success alert heading
>
> A simple success alert.

> [!DANGER] Danger alert heading
>
> A simple danger alert.

> [!WARNING] Warning alert heading
>
> A simple warning alert.

> [!INFO] Info alert heading
>
> A simple info alert.

> [!LIGHT] Light alert heading
>
> A simple light alert.

> [!DARK] Dark alert heading
>
> A simple dark alert.

> [!NB] A _nota bene_ alert.

<!-- prettier-ignore -->
> [!PRIMARY] Centered note
>
> Illustrating the use of element attributes.
{.text-center #alert-id data-debug="testing"}