Bootstrap - Bootstrap badges

Bootstrap badges (previously called labels in Bootstrap 3) are small count indicators or labels used to highlight information, statuses, or notifications. They are often attached to buttons, lists, or navigation links to display things like counts, statuses, or tags.

1. Bootstrap 3 – Labels

In Bootstrap 3, labels were used to highlight text.

Syntax:

<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-danger">Danger</span>

Contextual Classes in Bootstrap 3:

Class	Color / Meaning
`.label-default`	Gray / Neutral
`.label-primary`	Blue / Important
`.label-success`	Green / Positive
`.label-info`	Light Blue / Info
`.label-warning`	Orange / Warning
`.label-danger`	Red / Danger / Error

Example – Label on a button:

<button class="btn btn-primary">
  Messages <span class="label label-light">4</span>
</button>

Example – Label on text:

<p>New Feature <span class="label label-success">Beta</span></p>

2. Bootstrap 4 & 5 – Badges

In Bootstrap 4 & 5, labels were renamed to badges. Badges are more versatile and can be used inline, with buttons, lists, or navigation items.

Syntax:

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>

Contextual Classes in Bootstrap 5:

Class	Meaning / Color
`.bg-primary`	Blue / Important
`.bg-secondary`	Gray / Neutral
`.bg-success`	Green / Positive
`.bg-danger`	Red / Error
`.bg-warning`	Yellow / Warning
`.bg-info`	Light Blue / Info
`.bg-light`	Light Gray
`.bg-dark`	Dark Gray
`.bg-white`	White

3. Badge on Buttons

Badges are often used to show counts on buttons:

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

<button type="button" class="btn btn-success">
  Notifications <span class="badge bg-danger">12</span>
</button>

Notes:

.text-dark ensures readability on light-colored badges.

4. Pill Badges

Bootstrap allows rounded “pill” badges with .rounded-pill:

<span class="badge rounded-pill bg-success">New</span>
<span class="badge rounded-pill bg-danger">99+</span>

5. Badge in Navigation Links

Badges can also be used in navigation items to show counts:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Inbox <span class="badge bg-secondary">3</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Notifications <span class="badge bg-danger">9</span></a>
  </li>
</ul>

6. Badge in Lists

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge bg-primary rounded-pill">4</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-danger rounded-pill">10</span>
  </li>
</ul>

7. Badge with Links

<a href="#" class="badge bg-info text-decoration-none">Click Me</a>

Notes:

Use text-decoration-none to remove underline if the badge is a link.

8. Bootstrap 3 vs Bootstrap 4/5 Differences

Feature	Bootstrap 3	Bootstrap 4/5
Name	Labels	Badges
Base class	`.label`	`.badge`
Context classes	`.label-*`	`.bg-*`
Rounded pill	Not available	`.rounded-pill`
Use in lists/buttons	Yes	Improved & flexible
Color utilities	Limited	Extended (`bg-*`)

9. Complete Example (Bootstrap 5)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Badges Example</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap 5 Badges</h2>

  <!-- Basic Badges -->
  <span class="badge bg-primary">Primary</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>

  <!-- Pill Badges -->
  <span class="badge rounded-pill bg-success">New</span>
  <span class="badge rounded-pill bg-danger">99+</span>

  <!-- Badges on Buttons -->
  <button class="btn btn-primary mt-2">
    Messages <span class="badge bg-light text-dark">4</span>
  </button>
  <button class="btn btn-success mt-2">
    Notifications <span class="badge bg-danger">12</span>
  </button>

  <!-- Badges in Lists -->
  <ul class="list-group mt-3">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Messages
      <span class="badge bg-primary rounded-pill">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Notifications
      <span class="badge bg-danger rounded-pill">10</span>
    </li>
  </ul>

</body>
</html>