Skip to main content

# Alertes

# Exemples

Alerte pour annoncer un succès.
Alerte pour annoncer un échec.
Alerte pour annoncer un avertissement.
Alerte pour apporter une aide ou une information complémentaire.

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

Alerte clair sur fond sombre
Alerte sombre sur le fond de la zone de travail

    <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.

Alerte pour annoncer un succès avec un exemple de lien
Alerte pour annoncer un échec avec un exemple de lien
Alerte pour annoncer un avertissement avec un exemple de lien
Alerte pour apporter une information un exemple de lien
Alerte clair pour fond sombre avec un exemple de lien
Alerte sombre sur le fond de la zone de travail un exemple de lien

    <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

### Titre de l'alerte !

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <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

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.

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