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.