Badges Bootstrap5
Les badges servent principalement à mettre en évidence des éléments nouveaux ou non lus. Pour utiliser les badges, ajoutez simplement la.badgeclasse plus une classe de couleur avec une signification spécifique (par ex..bg-secondary) à l'<span>élément. Les badges peuvent changer en fonction de la taille de l'élément parent :
Exemples
<h1>Titre de test<span class="badge bg-secondary">Nouveau</span></h1>
<h2>Titre de test<span class="badge bg-secondary">Nouveau</span></h2>
<h3>Titre de test<span class="badge bg-secondary">Nouveau</span></h3>
<h4>Titre de test<span class="badge bg-secondary">Nouveau</span></h4>
<h5>Titre de test<span class="badge bg-secondary">Nouveau</span></h5>
<h6>Titre de test<span class="badge bg-secondary">Nouveau</span></h6>
Essayez-le vous-même »
Différents types de couleurs de badges
La liste suivante répertorie tous les types de couleurs de badges :
Exemples
<span class="badge bg-primary">Primaire</span>
<span class="badge bg-secondary">Secondaire</span>
<span class="badge bg-success">Succès</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Avertissement</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Clair</span>
<span class="badge bg-dark">Sombre</span>
Essayez-le vous-même »
Badges en forme de pilule
Utilisez la classe.rounded-pillpour définir des badges en forme de pilule :
Exemples
<span class="badge rounded-pill bg-primary">Primaire</span>
<span class="badge rounded-pill bg-success">Succès</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-warning">Avertissement</span>
<span class="badge rounded-pill bg-danger">Danger</span>
Essayez-le vous-même »
Badges à l'intérieur des éléments
L'exemple suivant intègre des badges dans des boutons :
Exemples
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-light">4</span>
</button>
Essayez-le vous-même »