List group with badges in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Rendering a Bootstrap list group with badges

What will be the visual output of this Bootstrap list group code snippet?

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>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-secondary rounded-pill">2</span>
  </li>
</ul>

A A vertical list with two items: 'Messages' with a blue pill-shaped badge showing '14' on the right, and 'Notifications' with a gray pill-shaped badge showing '2' on the right.

B A horizontal list with two items: 'Messages' and 'Notifications' each with badges below the text.

C A vertical list with two items: 'Messages' and 'Notifications' but badges appear on the left side of the text.

D A vertical list with two items but badges are square and appear inside the text.

💡 Hint

Look at the classes used for layout and badge styling.

The 'd-flex justify-content-between align-items-center' classes create a horizontal space between text and badge, placing the badge on the right. The 'badge bg-primary rounded-pill' creates a blue pill-shaped badge. The list is vertical by default.

❓ selector

intermediate

CSS selector for badge styling in Bootstrap list groups

Which CSS selector correctly targets the badge elements inside a Bootstrap list group item?

A .badge > .list-group-item

B .badge .list-group-item

C .list-group .badge-item

D .list-group-item > .badge

💡 Hint

Think about the badge being a direct child of the list group item.

In Bootstrap, badges are direct children of list-group-item elements, so the selector '.list-group-item > .badge' correctly targets them.

🧠 Conceptual

advanced

Accessibility considerations for badges in list groups

Which practice improves accessibility for badges in Bootstrap list groups?

A Use only color to indicate badge importance without text or labels.

B Hide badges from screen readers using aria-hidden="true" always.

C Add aria-label to the badge describing its meaning, e.g., aria-label="14 unread messages".

D Place badges outside the list group items to avoid confusion.

💡 Hint

Think about users who rely on screen readers.

Adding aria-label to badges helps screen readers understand the badge's meaning. Using only color or hiding badges from screen readers reduces accessibility.

❓ layout

advanced

Effect of removing flex classes on badge alignment

What happens if you remove the 'd-flex justify-content-between align-items-center' classes from the list group item containing a badge?

Bootsrap

<ul class="list-group">
  <li class="list-group-item">
    Messages
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ul>

A The badge appears immediately after the text without spacing and is vertically aligned baseline, not on the right side.

B The badge moves to the right side with space between text and badge.

C The badge appears below the text, centered horizontally.

D The badge disappears completely from the list item.

💡 Hint

Consider how flexbox controls horizontal spacing and alignment.

Without flexbox classes, the badge stays inline after the text with no space pushing it to the right, so it aligns baseline next to the text.

📝 Syntax

expert

Correct Bootstrap badge class for a pill-shaped badge

Which option uses the correct Bootstrap 5 class combination to create a pill-shaped badge with a green background inside a list group item?

A <span class="badge badge-success pill-rounded">New</span>

B <span class="badge bg-success rounded-pill">New</span>

C <span class="badge bg-green rounded-pill">New</span>

D <span class="badge bg-success rounded-circle">New</span>

💡 Hint

Check Bootstrap 5 badge color and shape classes.

In Bootstrap 5, 'bg-success' sets green background, and 'rounded-pill' creates pill shape. 'badge-success' and 'pill-rounded' are Bootstrap 4 or invalid classes. 'rounded-circle' makes a circle, not a pill.

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