Recommandation de cours :

Alerte Bootstrap 5

Alerte

Bootstrap 5 offre une méthode simple pour créer des messages d'alerte prédéfinis :

  • Les boîtes d'alerte sont créées à l'aide de la classe .alert, suivie d'une classe de contexte :
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Exemple

<div class="alert alert-success">
  <strong>Success !</strong> Cette boîte d'alerte indique une action réussie ou positive.
</div>

Essayez-le vous-même

.alert-dark

Liens d'alerte .alert-link Ajoutez la classe à tout lien dans la boîte d'alerte pour créer un "lien coloré correspondant" :

Exemple

<div class="alert alert-success">
  <strong>Success !</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>

Essayez-le vous-même

Fermez l'alerte

Pour fermer le message d'alerte, veuillez .alert-dismissible Ajoutez la classe à la boîte de message d'alerte. Ensuite, class="btn-close" et data-bs-dismiss="alert" Ajoutez à l'élément de lien ou de bouton (quand vous cliquez dessus, la boîte d'alerte disparaîtra).

Exemple

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success !</strong> Cette boîte d'alerte indique une action réussie ou positive.
</div>

Essayez-le vous-même

Animation de la boîte d'alerte

.fade et .show Ajouter un effet d'entrée et de sortie en douceur lors de la fermeture des messages d'alerte :

Exemple

<div class="alert alert-danger alert-dismissible fade show">

Essayez-le vous-même