List group with badges in Bootsrap

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>

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.

Practice

1. What is the main purpose of using a list group with badges in Bootstrap?

easy

A. To create horizontal navigation menus

B. To create image galleries

C. To add background colors to buttons

D. To display a vertical list of items with extra info like counts on the right

Solution

1. Step 1: Understand list groups

   List groups in Bootstrap organize items vertically for easy reading.

2. Step 2: Role of badges

   Badges add extra info like counts or statuses aligned to the right of list items.

3. Final Answer:

   To display a vertical list of items with extra info like counts on the right -> Option D

4. Quick Check:

   List groups + badges = vertical list with extra info [OK]

Hint: Badges show counts or status next to list items [OK]

Common Mistakes:

• Confusing badges with navigation tabs
• Thinking list groups are for images
• Using badges for background colors

2. Which Bootstrap class combination correctly aligns a badge to the right inside a list group item?

easy

A. list-group-item float-left

B. list-group-item text-center

C. list-group-item d-flex justify-content-between align-items-center

D. list-group-item badge-end

Solution

1. Step 1: Identify flex classes for alignment

   Using d-flex justify-content-between align-items-center makes the list item a flex container that spaces content horizontally and centers vertically.

2. Step 2: Confirm badge alignment

   This combination pushes the badge to the right side automatically.

3. Final Answer:

   list-group-item d-flex justify-content-between align-items-center -> Option C

4. Quick Check:

   Flex + justify-content-between aligns badge right [OK]

Hint: Use flex and justify-content-between for right badge alignment [OK]

Common Mistakes:

• Using float classes which Bootstrap 5 discourages
• Using text-center which centers content
• Using non-existent badge-end class

3. What will be the visual result of this code snippet?

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

medium

A. A vertical list with 'Messages' on left and a blue pill-shaped badge with '14' on right

B. A horizontal list with 'Messages' and badge stacked vertically

C. A list with badge below the text 'Messages'

D. An error because badge class is incorrect

Solution

1. Step 1: Analyze list group and flex classes

   The list-group-item with flex classes arranges content horizontally with space between.

2. Step 2: Badge styling and placement

   The badge uses bg-primary for blue background and rounded-pill for pill shape, placed on the right side.

3. Final Answer:

   A vertical list with 'Messages' on left and a blue pill-shaped badge with '14' on right -> Option A

4. Quick Check:

   Flex list group with badge = text left, badge right [OK]

Hint: Flex list group items show badge on right side [OK]

Common Mistakes:

• Thinking badge appears below text
• Confusing vertical and horizontal list layout
• Assuming badge class causes error

4. Identify the error in this Bootstrap list group with badges code:

<ul class="list-group">
  <li class="list-group-item">
    Notifications
    <span class="badge badge-primary">5</span>
  </li>
</ul>

medium

A. Incorrect badge color class; should be bg-primary

B. Missing flex classes to align badge right

C. Badge should be outside the list item

D. List group should be a div, not ul

Solution

1. Step 1: Check badge color class

   Bootstrap 5 uses bg-primary for badge background color, not badge-primary.

2. Step 2: Confirm badge alignment

   While flex classes help alignment, the main error is the wrong badge color class.

3. Final Answer:

   Incorrect badge color class; should be bg-primary -> Option A

4. Quick Check:

   Use bg-primary for badge color in Bootstrap 5 [OK]

Hint: Use bg-primary, not badge-primary, for badge colors [OK]

Common Mistakes:

• Using old Bootstrap 4 badge classes
• Forgetting flex classes but that is not an error
• Placing badge outside list item

5. You want to create a list group showing tasks with badges indicating priority: High (red), Medium (yellow), Low (green). Which badge classes correctly apply these colors in Bootstrap 5?

hard

A. badge-danger for High, badge-warning for Medium, badge-success for Low

B. bg-danger for High, bg-warning for Medium, bg-success for Low

C. text-danger for High, text-warning for Medium, text-success for Low

D. bg-primary for High, bg-secondary for Medium, bg-info for Low

Solution

1. Step 1: Identify correct badge background classes

   Bootstrap 5 uses bg-danger for red, bg-warning for yellow, and bg-success for green backgrounds.

2. Step 2: Confirm badge class usage

   Badges require bg-* classes, not badge-* or text-* for background colors.

3. Final Answer:

   bg-danger for High, bg-warning for Medium, bg-success for Low -> Option B

4. Quick Check:

   Use bg-danger/warning/success for badge colors [OK]

Hint: Use bg-danger/warning/success for red/yellow/green badges [OK]

Common Mistakes:

• Using old badge-danger classes
• Using text color classes instead of background
• Mixing unrelated color classes