What is List group with badges in Bootsrap?

Bootsrapmarkup~5 mins

List group with badges in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

List groups help organize items in a neat list. Badges show extra info like counts or status next to each item.

Showing a list of tasks with how many are pending

Displaying messages with the number of unread ones

Listing products with their stock count

Showing notifications with their priority level

Syntax

Bootsrap

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item name
    <span class="badge bg-primary rounded-pill">Badge content</span>
  </li>
</ul>

Use list-group-item for each list item.

Use d-flex justify-content-between align-items-center to place badge on the right side aligned vertically.

Examples

A simple list with one item and a badge showing number 14.

Bootsrap

<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">14</span>
  </li>
</ul>

Multiple list items with badges in different colors to show different meanings.

Bootsrap

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-danger rounded-pill">3</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Updates
    <span class="badge bg-success rounded-pill">7</span>
  </li>
</ul>

Badge showing zero count, useful to indicate no items.

Bootsrap

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Empty badge
    <span class="badge bg-secondary rounded-pill">0</span>
  </li>
</ul>

Sample Program

This example shows a list of email folders with badges indicating the number of messages in each. Different badge colors help show importance or status.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>List Group with Badges Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-4">
    <h1 class="mb-4">Tasks List</h1>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Inbox
        <span class="badge bg-primary rounded-pill">5</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Sent
        <span class="badge bg-secondary rounded-pill">2</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Drafts
        <span class="badge bg-warning text-dark rounded-pill">1</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Spam
        <span class="badge bg-danger rounded-pill">0</span>
      </li>
    </ul>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Badges use bg-* classes for colors and rounded-pill for pill shape.

Use flex utilities d-flex justify-content-between align-items-center to align text left and badge right.

Badges should have good color contrast for accessibility.

Summary

List groups organize items vertically.

Badges show extra info like counts or status next to items.

Use Bootstrap flex classes to align badges nicely on the right.