Bootstrap4 Badges
Les badges sont principalement utilisés pour mettre en évidence les éléments nouveaux ou non lus. Pour utiliser un badge, ajoutez simplement la.badgeclasse plus une classe de couleur avec une signification spécifiée (telle que.badge-secondary) à l'<span>L'élément est suffisant. Les badges peuvent changer en fonction de la taille de l'élément parent :
Exemple
<h1>Titre de test<span class="badge badge-secondary">Nouveau</span></h1>
<h2>Titre de test<span class="badge badge-secondary">Nouveau</span></h2>
<h3>Titre de test<span class="badge badge-secondary">Nouveau</span></h3>
<h4>Titre de test<span class="badge badge-secondary">Nouveau</span></h4>
<h5>Titre de test<span class="badge badge-secondary">Nouveau</span></h5>
<h6>Titre de test<span class="badge badge-secondary">Nouveau</span></h6>
Essayez-le »
Badges de divers types de couleurs
La liste suivante présente les badges de tous les types de couleurs :
Exemple
<span class="badge badge-primary">Primaire</span>
<span class="badge badge-secondary">Secondaire</span>
<span class="badge badge-success">Succès</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Avertissement</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Clair</span>
<span class="badge badge-dark">Sombre</span>
Essayez-le »
Badges en forme de pilule
Utilisez la classe.badge-pillpour définir des badges en forme de pilule :
Exemple
<span class="badge badge-pill badge-default">Par défaut</span>
<span class="badge badge-pill badge-primary">Primaire</span>
<span class="badge badge-pill badge-success">Succès</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Avertissement</span>
<span class="badge badge-pill badge-danger">Danger</span>
Essayez-le »
Insérer des badges dans les éléments
L'exemple suivant intègre un badge dans un bouton :
Exemple
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
Essayez-le »