List group with badges in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a list group item with a badge showing the 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">[1]</span>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

Alist-group-item

Bbadge

C14

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Putting class names inside the badge content instead of the number.

Leaving the badge span empty.

The badge content should be the number 14 to display the count inside the badge.

2fill in blank

medium

Complete the code to add the correct Bootstrap class to the badge for a green background.

Bootsrap

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge [1] rounded-pill">5</span>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

Abg-warning

Bbg-success

Cbg-danger

Dbg-info

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bg-danger' which is red instead of green.

Forgetting to add any background color class.

The class 'bg-success' gives the badge a green background color in Bootstrap.

3fill in blank

hard

Fix the error in the code by choosing the correct class to make the list group item and badge align horizontally.

Bootsrap

<ul class="list-group">
  <li class="list-group-item [1] justify-content-between align-items-center">
    Tasks
    <span class="badge bg-secondary rounded-pill">7</span>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

Ad-block

Bd-grid

Cd-inline

Dd-flex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'd-block' which stacks items vertically.

Using 'd-inline' which does not create a flex container.

The 'd-flex' class makes the list group item a flex container, aligning content horizontally.

4fill in blank

hard

Fill both blanks to create a list group with two items, each having a badge with different colors.

Bootsrap

<ul class="list-group">
  <li class="list-group-item [1] justify-content-between align-items-center">
    Messages
    <span class="badge [2] rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Alerts
    <span class="badge bg-danger rounded-pill">3</span>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

Ad-flex

Bbg-primary

Cbg-success

Dd-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'd-block' which stacks content vertically.

Using wrong badge color classes.

The list item needs 'd-flex' to align content horizontally, and the badge uses 'bg-primary' for a blue background.

5fill in blank

hard

Fill all three blanks to create a list group with three items, each with badges showing counts and different colors.

Bootsrap

<ul class="list-group">
  <li class="list-group-item [1] justify-content-between align-items-center">
    Inbox
    <span class="badge [2] rounded-pill">8</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Updates
    <span class="badge bg-warning rounded-pill">4</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Spam
    <span class="badge [3] rounded-pill">1</span>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

Ad-flex

Bbg-info

Cbg-danger

Dd-block

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting 'd-flex' on the first list item.

Mixing badge color classes.

The first list item uses 'd-flex' for horizontal layout, the first badge uses 'bg-info' for a light blue color, and the last badge uses 'bg-danger' for red.

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