Principe

Les badges s'adaptent à la taille de leur balise parente (unités en em).
Les couleurs de texte et background sont gérées via des classes additionnelles .text-bg-{theme}.

Titres

Example heading New

<h1>Example heading <span class="badge text-bg-primary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-success">New</span></h3>
<h4>Example heading <span class="badge text-bg-warning">New</span></h4>
<h5>Example heading <span class="badge text-bg-danger">New</span></h5>
<h6>Example heading <span class="badge text-bg-info">New</span></h6>

Boutons

Les badges peuvent être utilisés dans des liens ou des boutons pour servir de compteur.

<button type="button" class="btn btn-primary">
    Notifications <span class="badge text-bg-light">4</span>
</button>

Positionnement particulier

<button type="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 class="visually-hidden">unread messages</span>
    </span>
</button>

Indicateur

<button type="button" class="btn btn-primary">
    Notifications <span class="badge text-bg-light">4</span>
</button>

Contexte - Couleur de fond

Primary Secondary Success Danger Warning Info Light 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-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Pilule

Utilisez la classe .rounded-pill pour afficher les badges sous forme de pilule.

Primary Secondary Success Danger Warning Info Light Dark

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

Variables

CSS (scss/_badge.scss)

--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

SASS (scss/_variables.scss)

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);