Design BADGES

Introduction aux badges (étiquettes visuelles)

Les .badge sont utilisés pour afficher des informations complémentaires comme un statut, un compteur ou une étiquette visuelle.

Les badges s’adaptent automatiquement à la taille du texte parent.

Exemple simple

Aperçu :

Titre de section Nouveau


<h4>
Titre de section 
<span class="badge bg-secondary">Nouveau</span>
</h4>

Couleurs disponibles

Aperçu :

Primary Secondary Success Danger Warning Info Dark


<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-dark">Dark</span>

Badge dans un bouton

Aperçu :


<button class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Badge positionné (notification)

Aperçu :


<button class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

Badge arrondi (pill)

Aperçu :

Validé


<span class="badge rounded-pill text-bg-success">
  Validé
</span>