Badges

Prev Next

A badge is a small count or label pill that rides alongside other content — a notification count, a status label, a distance tag on a trail card. In Bootstrap 4 the base class is .badge, combined with one of the eight theme color names as .badge-{color}.

1. Basic Badge Colors: .badge + .badge-{color}

Every badge needs the base .badge class plus a color class, both on the same element.

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

badge-{color}, not bg-{color}. Bootstrap 4 pairs .badge with a dedicated .badge-{color} class for each theme color. Bootstrap 5 later dropped the dedicated badge-color classes and reused the generic .bg-{color} background utility instead (e.g. class="badge bg-primary") — that combination is Bootstrap 5 only.

2. Pill Badges: .badge-pill

Add .badge-pill for fully rounded ends instead of the default slightly-rounded corners — the shape most people picture when they hear "badge".

<span class="badge badge-primary badge-pill">14</span>
<span class="badge badge-danger badge-pill">New</span>

badge-pill, not rounded-pill. .badge-pill is the real Bootstrap 4 class name for the fully rounded shape. Bootstrap 5 renamed it to the more general-purpose .rounded-pill, which in Bootstrap 5 also works on non-badge elements — but that class name does not exist in Bootstrap 4.

3. Badges Inside Buttons and Headings

A badge nested inside a button or a heading automatically repositions and rescales to sit comfortably alongside the surrounding text.

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

<h4>
  Trail reports <span class="badge badge-secondary">128</span>
</h4>

4. Worked Example: TrailMap Distance and New Badges

TrailMap uses two badges on every fresh trail card: a neutral distance badge and, for trails added in the last 30 days, a bright pill-shaped "New" badge.

<h5>
  Sunset Ridge Trail
  <span class="badge badge-secondary">3.2 mi</span>
  <span class="badge badge-success badge-pill">New</span>
</h5>

Next up: a badge is a good fit for a persistent inline label, but for a one-time message like "your trail was submitted", head to Alerts — the next lesson covers Bootstrap 4's dismissible message boxes.

Prev Next