Skip to content

Bootstrap Badges Explained — Labels and Count Indicators

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Badges Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap badges are small count or label indicators that scale to match parent element size, with contextual colors, pill shape, and positioning for notifications.

What You'll Learn

  • Badge base class
  • Pill badges (rounded)
  • Contextual color variants
  • Positioned badges
  • Badges in buttons and headings

Why It Matters

Badges provide visual indicators for notifications, status labels, counts, and tags. They automatically scale to match parent typography size.

<div class="container mt-4">
  <h2>Badges in Headings</h2>
  <h1>Heading 1 <span class="badge bg-primary">New</span></h1>
  <h2>Heading 2 <span class="badge bg-secondary">New</span></h2>
  <h3>Heading 3 <span class="badge bg-success">New</span></h3>
  <h4>Heading 4 <span class="badge bg-danger">New</span></h4>
  <h5>Heading 5 <span class="badge bg-warning text-dark">New</span></h5>
  <h6>Heading 6 <span class="badge bg-info text-dark">New</span></h6>

  <h2>Pill Badges</h2>
  <span class="badge rounded-pill bg-primary">Primary</span>
  <span class="badge rounded-pill bg-success">Success</span>
  <span class="badge rounded-pill bg-danger">Danger</span>
  <span class="badge rounded-pill bg-warning text-dark">Warning</span>

  <h2>Badges in Buttons</h2>
  <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>

  <button type="button" class="btn btn-outline-primary position-relative m-2">
    Alerts
    <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2">
      <span class="visually-hidden">unread alerts</span>
    </span>
  </button>

  <h2>Status Badges</h2>
  <span class="badge bg-success">Active</span>
  <span class="badge bg-warning text-dark">Pending</span>
  <span class="badge bg-danger">Inactive</span>
  <span class="badge bg-secondary">Archived</span>
</div>

Expected output: Badges in headings auto-scale, pill badges have rounded corners, notification badges position over buttons, and status badges use semantic colors.

← Previous Bootstrap Alerts Explained — Feedback Messages Next → Bootstrap Progress Explained — Progress Bar Component

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap