Bootstrap Badges & Progress — Status Labels and Progress Bars

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

Bootstrap badges are small count or status labels. Progress bars show task completion visually with support for stripes, animations, labels, and stacking.

What You'll Learn

You will learn how to create badges with contextual colors, position badges on buttons and links, build progress bars with labels, and use striped and animated variants.

Why It Matters

Badges and progress bars provide visual status feedback. DodaTech uses badges for notification counts and progress bars for scan progress and file uploads.

Real-World Use

Durga Antivirus Pro uses progress bars for real-time scan progress and badges for threat count notifications on the dashboard menu.

flowchart LR
    A[Toasts & Alerts] --> B[Badges & Progress]
    B --> C[Badges]
    B --> D[Positioned Badges]
    B --> E[Progress Bars]
    B --> F[Progress Variants]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style E fill:#22c55e,stroke:#16a34a,color:#fff

Basic Badges

<h1>Heading <span class="badge bg-secondary">New</span></h1>
<h2>Heading <span class="badge bg-primary">Primary</span></h2>
<h3>Heading <span class="badge bg-success">Success</span></h3>
<h4>Heading <span class="badge bg-danger">Danger</span></h4>
<h5>Heading <span class="badge bg-warning text-dark">Warning</span></h5>
<h6>Heading <span class="badge bg-info text-dark">Info</span></h6>

Expected output: Six heading sizes with badges of different colors aligned to the heading text.

Pill Badges

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

Expected output: Four badges with fully rounded pill shapes.

Positioned Badges

<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-primary position-relative ms-4">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Expected output: A button with a red badge in the top-right corner showing a count, and a button with a small red dot indicator.

Badge on Links

<a href="#" class="text-decoration-none">
  Notifications <span class="badge bg-primary">4</span>
</a>

Expected output: A link with an inline badge next to the text.

Basic Progress Bar

<div class="progress mb-3">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
       aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<div class="progress mb-3">
  <div class="progress-bar bg-success" role="progressbar" style="width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 90%;"
       aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
</div>

Expected output: Three progress bars showing 25%, 60%, and 90% completion with matching colors.

Progress Bar Height

<div class="progress mb-2" style="height: 5px;">
  <div class="progress-bar" style="width: 40%;"></div>
</div>
<div class="progress mb-2" style="height: 20px;">
  <div class="progress-bar" style="width: 40%;">40%</div>
</div>
<div class="progress" style="height: 30px;">
  <div class="progress-bar" style="width: 40%;">40%</div>
</div>

Expected output: Progress bars of different heights (5px, 20px, 30px).

Striped and Animated

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped" style="width: 40%;">40%</div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
       style="width: 65%;">65%</div>
</div>

Expected output: A striped progress bar and an animated striped bar with moving stripes.

Stacked Progress Bars

<div class="progress">
  <div class="progress-bar bg-success" style="width: 35%" aria-valuenow="35"
       aria-valuemin="0" aria-valuemax="100">Free space</div>
  <div class="progress-bar bg-warning" style="width: 20%" aria-valuenow="20"
       aria-valuemin="0" aria-valuemax="100">Used</div>
  <div class="progress-bar bg-danger" style="width: 15%" aria-valuenow="15"
       aria-valuemin="0" aria-valuemax="100">System</div>
</div>

Expected output: A single progress bar divided into three segments showing different categories of disk usage.

Common Mistakes

1. Missing aria-* Attributes on Progress Bars

Progress bars need role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax for Accessibility.

2. Using Badges Without Rounded-pill for Modern Look

Plain badges have slightly rounded corners. Add rounded-pill for the modern pill shape.

3. Badges Overflowing Parent on Small Screens

Positioned badges can overflow on small screens. Use responsive font sizing or adjust positioning.

4. Forgetting bg-* Color on Badges

Badges without a background color class inherit no color, making them invisible. Always add bg-* or use Bootstrap's default.

5. Progress Label Not Updating Dynamically

Static progress bars are for display only. For dynamic updates, use JavaScript to update style="width: X%" and the text content.

Practice Questions

1. How do you create a pill-shaped badge? Add rounded-pill class to the badge element.

2. How do you position a badge on a button's corner? Use Bootstrap's position utilities: position-absolute top-0 start-100 translate-middle.

3. What attributes make a progress bar accessible? role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax.

4. How do you make a striped animated progress bar? Use progress-bar-striped progress-bar-animated together on the progress bar.

5. How do you stack multiple progress bars in one container? Place multiple progress-bar divs inside a single progress container.

Challenge

Build a disk usage dashboard with a stacked progress bar showing used space, system reserved space, and free space in different colors. Add a badge next to the title showing total disk capacity.

FAQ

Mini Project

Build a software installation wizard UI with three progress bars: overall installation progress, file extraction progress (striped animated), and configuration progress. Add badges for version number and step count.

What's Next

Learn Customizing Bootstrap with Sass for theme customization. Then explore Customizing Bootstrap with CSS Variables.