Exemples

<div class="alert alert-success" role="alert">
  ...
</div>
<div class="alert alert-danger" role="alert">
  ...
</div>
<div class="alert alert-warning" role="alert">
  ...
</div>
<div class="alert alert-info" role="alert">
  ...
</div>
<div class="alert alert-light" role="alert">
  ...
</div>
<div class="alert alert-dark" role="alert">
  ...
</div>

Liens

La classe .active-link permet d'ajouter un lien dont la couleur s'associe à la couleur de l'alerte.

<div class="alert alert-success" role="alert">
  Alerte pour annoncer un succès avec <a href="#" class="alert-link">un exemple de lien</a>
</div>

Contenu des alertes

Les alertes peuvent accueillir du contenu HTML comme des titres, des paragraphes ou des filets séparateurs

<div class="alert alert-success" role="alert">
  <h3 class="alert-heading">Titre de l'alerte !</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
  </p>
  <hr>
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Fermeture des alertes

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Lorem ipsum </strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>