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.