Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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