Badges

A badge is a small, bold label used to draw the eye to a count, status, or short piece of metadata sitting next to other content — a notification count, a "New" flag, a distance, a stock status. It's pure CSS: one .badge class plus a color, no JavaScript involved.

1. Base Badge and Color Variants

.badge gives the small, bold, padded pill shape. Combine it with any .bg-{color} utility from the colors lesson to set its background.

<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>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

2. Pill Badges: .rounded-pill

Add .rounded-pill for fully rounded ends instead of the default slightly-rounded corners.

<span class="badge rounded-pill bg-primary">Primary pill</span>
<span class="badge rounded-pill bg-success">Success pill</span>

3. Badges Inside Buttons and Headings

A badge nested inside a button is the standard notification-count pattern; a badge nested inside a heading adds a status tag right next to a title.

<!-- Notification count inside a button -->
<button type="button" class="btn btn-primary">
  Inbox <span class="badge bg-light text-dark">4</span>
</button>

<!-- Status tag inside a heading -->
<h4>
  Order status <span class="badge bg-success">Confirmed</span>
</h4>

4. Worked Example: TrailMap Distance and "New" Badges

Every TrailMap trail card shows its distance as a neutral pill badge, and cards for trails added in the last 14 days get an extra "New" badge in the theme's success color.

<h5 class="card-title">
  Ridgeline Loop
  <span class="badge bg-success">New</span>
</h5>
<p class="card-text">
  <span class="badge rounded-pill bg-secondary">3.2 mi</span>
</p>