Écussons Bootstrap 5

Badges

Les badges (Badges) sont utilisés pour ajouter des informations supplémentaires au contenu :

dans <span> dans l'élément .badge et les classes de contexte (comme .bg-secondary) pour créer un badge rectangulaire. Notez que le badge sera mis à l'échelle pour correspondre à la taille de l'élément parent (si présent) :

Exemple

<h1>Titre d'exemple <span class="badge bg-secondary">Nouveau</span></h1>
<h2>Titre d'exemple <span class="badge bg-secondary">Nouveau</span></h2>
<h3>Titre d'exemple <span class="badge bg-secondary">Nouveau</span></h3>
<h4>Titre d'exemple <span class="badge bg-secondary">Nouveau</span></h4>
<h5>Titre d'exemple <span class="badge bg-secondary">Nouveau</span></h5>
<h6>Titre d'exemple <span class="badge bg-secondary">Nouveau</span></h6>

Essayez-le vous-même

Badge de contexte

Utilisez n'importe quel contexte de classe (.bg-*) pour changer la couleur des badges :

Exemple

<span class="badge bg-primary">Principal</span>
<span class="badge bg-secondary">Secondaire</span>
<span class="badge bg-success">Réussi</span>
<span class="badge bg-danger">Dangereux</span>
<span class="badge bg-warning">Avertissement</span>
<span class="badge bg-info">Information</span>
<span class="badge bg-light">Clair</span>
<span class="badge bg-dark">Sombre</span>

Essayez-le vous-même

Médaille capsule

Utilisation .rounded-pill La classe rend la médaille plus ronde :

Exemple

<span class="badge rounded-pill bg-primary">Principal</span>
<span class="badge rounded-pill bg-secondary">Secondaire</span>
<span class="badge rounded-pill bg-success">Réussite</span>
<span class="badge rounded-pill bg-danger">Dangereux</span>
<span class="badge rounded-pill bg-warning">Avertissement</span>
<span class="badge rounded-pill bg-info">Information</span>
<span class="badge rounded-pill bg-light">Clair</span>
<span class="badge rounded-pill bg-dark">Sombre</span>

Essayez-le vous-même

Médaille dans l'élément

Exemple d'utilisation de la médaille dans le bouton :

Exemple

<button type="button" class="btn btn-primary">
  Message <span class="badge bg-danger">4</span>
</button>

Essayez-le vous-même