EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

List Group & Badge

1. Lesson Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Point

Charlie is building a ticket management system and needs to display "Pending (5)", "In Progress (3)", "Completed (12)" in a sidebar — a classic combination of list groups and badges.

(4) Solution

List groups and badges are lightweight yet practical display components in Bootstrap. List groups present a set of related items, while badges display counts or statuses in corners.

Understanding: List Group = an enhanced <ul> (better styled, interactive), Badge = a small label (shows numbers/status, attached to other elements).

(5) Benefits

Using list groups with badges clearly and intuitively displays categorized notification counts, greatly improving information acquisition efficiency.

2. List Group Basics

HTML 
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: List Group Basics

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Group Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row">
      <div class="col-md-4">
        <h5>Basic List</h5>
        <ul class="list-group">
          <li class="list-group-item">Dashboard</li>
          <li class="list-group-item">Orders</li>
          <li class="list-group-item">Products</li>
          <li class="list-group-item">Customers</li>
        </ul>
      </div>

      <div class="col-md-4">
        <h5>Active & Disabled</h5>
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">Home</a>
          <a href="#" class="list-group-item list-group-item-action">Profile</a>
          <a href="#" class="list-group-item list-group-item-action disabled">Settings (locked)</a>
        </div>
      </div>

      <div class="col-md-4">
        <h5>Flush Style</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Inbox <span class="badge bg-primary rounded-pill">3</span></li>
          <li class="list-group-item">Sent</li>
          <li class="list-group-item">Drafts <span class="badge bg-warning">2</span></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

3. List Group Variations

(1) Interactive List Group

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Active link</a>
  <a href="#" class="list-group-item list-group-item-action">Regular link</a>
  <button class="list-group-item list-group-item-action">Button as item</button>
</div>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

(2) Color Variants

HTML 
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
</ul>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

class Background Color Semantic
list-group-item-primary Light blue Info
list-group-item-success Light green Success
list-group-item-danger Light red Error
list-group-item-warning Light yellow Warning

(3) List Group with Badges

HTML 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <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>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

4. Custom List Group Content

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">New update released</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Version 2.4 includes bug fixes and performance improvements.</p>
    <small class="text-body-secondary">By Alice Chen</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Server maintenance</h5>
      <small class="text-body-secondary">1 week ago</small>
    </div>
    <p class="mb-1">Scheduled downtime on Saturday 2:00 AM - 4:00 AM UTC.</p>
    <small class="text-body-secondary">By Bob Wang</small>
  </a>
</div>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

5. Badges

HTML 
<h1>Example heading <span class="badge bg-secondary">New</span></h1>

<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>
</button>

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-warning">Warning</span>

<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">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-dark">Dark</span>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

(1) Badge Color Semantics

class Usage
bg-primary Default label
bg-success Completed/Passed
bg-danger Error/Failure count
bg-warning Pending/Needs attention
bg-info Informational label
bg-secondary Neutral/Secondary label

6. More List Group Examples

▶ Example: Tab-style List Group Navigation

HTML 
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel">Home content: welcome to the dashboard.</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel">Profile content: manage your personal info.</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel">Messages content: view your inbox.</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel">Settings content: configure preferences.</div>
    </div>
  </div>
</div>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Complex List (Badge + Icon)

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">📧</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">New message from Alice</h6>
        <small class="text-body-secondary">2 min ago</small>
      </div>
      <small class="text-body-secondary">Meeting rescheduled to 3pm.</small>
    </div>
    <span class="badge bg-danger rounded-pill ms-2">3</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">🔔</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Server alert</h6>
        <small class="text-body-secondary">1 hr ago</small>
      </div>
      <small class="text-body-secondary">CPU usage exceeded 90%.</small>
    </div>
    <span class="badge bg-warning rounded-pill ms-2">5</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">✅</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Deployment complete</h6>
        <small class="text-body-secondary">3 hr ago</small>
      </div>
      <small class="text-body-secondary">Version 2.4 deployed to production.</small>
    </div>
    <span class="badge bg-success rounded-pill ms-2">12</span>
  </a>
</div>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Checkbox List Group

HTML 
<div class="list-group">
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="" checked>
    HTML & CSS Basics
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="">
    JavaScript Fundamentals
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="" checked>
    Bootstrap 5 Framework
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="">
    React & Vue.js
  </label>
  <label class="list-group-item d-flex align-items-center disabled">
    <input class="form-check-input me-2" type="checkbox" value="" disabled>
    Advanced Node.js (locked)
  </label>
</div>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Custom Color List Group

HTML 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action list-group-item-success d-flex justify-content-between align-items-center">
    <span>✅ Task completed</span>
    <span class="badge bg-success rounded-pill">12</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-warning d-flex justify-content-between align-items-center">
    <span>⏳ In progress</span>
    <span class="badge bg-warning rounded-pill">5</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center">
    <span>❌ Overdue</span>
    <span class="badge bg-danger rounded-pill">3</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-info d-flex justify-content-between align-items-center">
    <span>ℹ️ New updates</span>
    <span class="badge bg-info rounded-pill">8</span>
  </button>
</div>
▶ Try it Yourself

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

(1) List Group Component Tree

100% 
flowchart TD
    A[list-group container] --> B[list-group-item list item]
    B --> C[list-group-item-action<br/>interactive]
    B --> D[list-group-item-primary<br/>color variant]
    B --> E[badge]
    A --> F[list-group-flush<br/>borderless]
    A --> G[Custom content<br/>Flex + Typography]

Output: Component effects with Bootstrap 5.3 styling (such as buttons, cards, carousels, collapses, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

List Group Variant class Usage
Basic list list-group + list-group-item Simple item display
Interactive list-group-item-action Navigation, menus
Borderless list-group-flush Inside cards, compact scenarios
Color rows list-group-item-{color} Status classification
Number badge badge rounded-pill Count, notification numbers
Checkbox/Radio form-check-input + list-group-item Task lists, multiple selections
Badge Color Semantic Applicable Scenario
bg-primary Default/Info Regular counts
bg-success Success/Completed Completed tasks, passed
bg-danger Error/Urgent Failure counts, alert counts
bg-warning Pending In progress, awaiting approval
bg-info Tip New notifications, new messages
bg-secondary Secondary Auxiliary counts
Navigation Method Advantages Disadvantages Best Scenario
List group navigation Rich styling, supports badges No nesting support Sidebar menus, tabs
Nav nav-tabs Native tab style, supports dropdowns No badge support Page tab switching
Navbar nav Responsive, brand integration Complex structure Top main navigation
Dropdown Compact, space-saving Shows only current item User menu, settings

❓ FAQ

Q Can list groups be nested?
A No, nesting is not supported. List groups are designed for a flat structure. For hierarchy, consider using Bootstrap's Accordion component or manually nested ul.
Q How to control the border-radius of a badge?
A rounded-pill creates a pill shape (semi-circular ends), rounded-1/2/3 are varying degrees of border-radius, without it defaults to a square shape.
Q Can a list group be used for clickable navigation?
A Yes. Use <a> or <button> elements, add list-group-item-action, and use active to indicate the current selected item. It's ideal for sidebar navigation.
Q Does the active state of a list group persist after a page refresh?
A No, it doesn't persist automatically. active is a static class. After refresh, it needs to be added dynamically by the backend or JavaScript based on the current route, e.g., using window.location matching.
Q What's the difference between putting a list group inside a card vs. using it directly?
A A list group inside a card typically uses the list-group-flush style, so it aligns with the card's edges without extra borders and corners, visually integrating as one. A list group outside a card has its own borders and corners.

📖 Summary

📝 Assignment

  1. ⭐ Create a sidebar navigation list group: 5 menu items, the current page highlighted as active, one set as disabled, each item displays a corresponding number badge on the right.
  2. ⭐⭐ Create a notification list using a list group + custom content: each notification has a title, timestamp (small), body preview, and supports click events.
  3. ⭐⭐⭐ Create a button group, each button displays a badge count in the upper right corner, simulating "Inbox (12)", "Pending Approval (5)", "Drafts (3)".

Previous Lesson: Cards · Next Lesson: Tables

Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏