List group component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap list group container.

Bootsrap

<ul class="[1]">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

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

Acontainer

Bgroup-list

Clist

Dlist-group

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' instead of 'list-group' for the list container.

Using 'list' or 'group-list' which are not Bootstrap classes.

The list-group class creates a Bootstrap list group container that styles the list items properly.

2fill in blank

medium

Complete the code to make the second list item active in the Bootstrap list group.

Bootsrap

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item [1]">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

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

Aactive

Bhighlight

Cdisabled

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'disabled' which makes the item unclickable but not active.

Using 'highlight' or 'selected' which are not Bootstrap classes.

The active class highlights the list item as active in Bootstrap list groups.

3fill in blank

hard

Fix the error in the code to make the list group flush (no border radius).

Bootsrap

<ul class="list-group [1]">
  <li class="list-group-item">First</li>
  <li class="list-group-item">Second</li>
  <li class="list-group-item">Third</li>
</ul>

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

Aflush-list-group

Blist-group-flush

Clist-flush-group

Dflush-list

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names that do not exist in Bootstrap.

Forgetting to add the flush class to the

element.

The list-group-flush class removes the outer borders and border-radius from the list group.

4fill in blank

hard

Fill both blanks to create a list group with horizontal layout on medium screens and above.

Bootsrap

<ul class="list-group [1] [2]">
  <li class="list-group-item">One</li>
  <li class="list-group-item">Two</li>
  <li class="list-group-item">Three</li>
</ul>

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

Alist-group-horizontal-md

Bhorizontal-md

Clist-horizontal-md

Dgroup-horizontal-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using incomplete or incorrect class names like 'horizontal-md' or 'list-horizontal-md'.

Adding the class to list items instead of the list container.

The list-group-horizontal-md class makes the list group horizontal starting at medium screen sizes. It is added once but here the task expects filling both blanks with the same class to emphasize usage.

5fill in blank

hard

Fill all three blanks to create a list group with flush style, horizontal on large screens, and the third item disabled.

Bootsrap

<ul class="list-group [1] [2]">
  <li class="list-group-item">Alpha</li>
  <li class="list-group-item">Beta</li>
  <li class="list-group-item [3]">Gamma</li>
</ul>

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

Alist-group-flush

Blist-group-horizontal-lg

Cdisabled

Dlist-group-item-disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'list-group-item-disabled' which is not a Bootstrap class.

Placing horizontal class on list items instead of the list container.

The list-group-flush class removes borders, list-group-horizontal-lg makes the list horizontal on large screens, and disabled disables the third list item.