Badges

Small labels for counts, statuses, and tags

Badges are small labels for counts, statuses, and tags. They adapt to the size of the parent and come in all Bootstrap color variants.

Use .badge with a background color class like .bg-primary or .bg-danger. Badges scale to match the font size of the parent element.

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

primarysecondarysuccessdangerwarninginfo

.badge with .bg-{variant} for each color

26 / 37