List group with badges in Bootsrap - Mini Project: Build & Apply

Create a Bootstrap List Group with Badges

📖 Scenario: You are building a simple webpage to show a list of tasks with the number of pending items next to each task. You want to use Bootstrap's list group component with badges to display this clearly.

🎯 Goal: Build a Bootstrap list group with three items: Inbox, Sent, and Drafts. Each item should have a badge showing the number of messages: 5 for Inbox, 2 for Sent, and 1 for Drafts.

📋 What You'll Learn

Use a <ul> element with the class list-group to create the list.

Add three <li> elements with the class list-group-item for the items.

Add a Bootstrap badge with the class badge bg-primary rounded-pill inside each list item to show the numbers 5, 2, and 1 respectively.

Include the Bootstrap CSS link in the <head> section.

Use semantic HTML and ensure the page is responsive.

💡 Why This Matters

🌍 Real World

List groups with badges are common in email apps, notification centers, and dashboards to show counts clearly next to items.

💼 Career

Knowing how to use Bootstrap components helps you quickly build clean, responsive user interfaces that are accessible and visually consistent.

1

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en" in the <html> tag. Add a <head> section with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, and include the Bootstrap 5 CSS from the official CDN using a <link> tag.

Bootsrap

Hint

Use the Bootstrap 5 CSS CDN link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

2

Create the list group container with three list items

Inside the <body>, create an unordered list <ul> with the class list-group. Add three list items <li> with the class list-group-item containing the text Inbox, Sent, and Drafts respectively.

Bootsrap

  
  
  
  List Group with Badges


   with class 'list-group' and add three  items with class 'list-group-item' for Inbox, Sent, Drafts -->
  

Hint

Use <ul class="list-group"> and inside it three <li class="list-group-item"> elements with the exact text.

3

Add badges with message counts inside each list item

Inside each <li> element, add a <span> with the classes badge bg-primary rounded-pill. The badges should show the numbers 5 for Inbox, 2 for Sent, and 1 for Drafts. Place the badge after the text with a space.

Bootsrap

  
  
  
  List Group with Badges


  
    Inbox 
    Sent 
    Drafts 
  

Hint

Use <span class="badge bg-primary rounded-pill">number</span> inside each list item after the text.

4

Add a page title and container for better layout

Wrap the <ul> inside a <main> element with the class container my-4 for spacing. Above the list, add a heading <h1> with the text Messages. This completes the page layout.

Bootsrap

  
  
  
  List Group with Badges


   with class 'container my-4' and add a heading 'Messages' above -->

Hint

Use a <main class="container my-4"> wrapper and add <h1>Messages</h1> above the list.

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