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.

Practice

1. What is the main purpose of the Bootstrap list-group component?

easy

A. To organize and style a list of items cleanly

B. To create a navigation bar

C. To add buttons with icons

D. To display images in a grid

Solution

1. Step 1: Understand the role of list-group

   The list-group component is designed to group related items in a list format.

2. Step 2: Compare with other components

   Unlike navigation bars or grids, list-group focuses on listing items with consistent styling.

3. Final Answer:

   To organize and style a list of items cleanly -> Option A

4. Quick Check:

   List groups = styled item lists [OK]

Hint: Remember list groups are for clean lists, not nav or grids [OK]

Common Mistakes:

• Confusing list group with navigation bar
• Thinking it creates buttons or grids
• Mixing it with image display components

2. Which of the following is the correct way to start a Bootstrap list group in HTML?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify the container class for list groups

   Bootstrap requires the container to have the class list-group to apply styles.

2. Step 2: Choose the correct HTML element

   Commonly, <ul> or <div> with list-group is used; here <ul> with class list-group is correct.

3. Final Answer:

   <ul class="list-group"> -> Option C

4. Quick Check:

   Use <ul> with class list-group [OK]

Hint: Use <ul> or <div> with class list-group to start [OK]

Common Mistakes:

• Using wrong class names like list-item or group-list
• Using <ol> without correct class
• Using elements without the list-group class

3. What will be the visual result of this code?

<ul class="list-group">
  <li class="list-group-item active">Home</li>
  <li class="list-group-item">Profile</li>
  <li class="list-group-item disabled">Messages</li>
</ul>

medium

A. All items appear the same with no special styling

B. A list with 'Home' highlighted, 'Profile' normal, and 'Messages' greyed out and unclickable

C. Only 'Messages' is highlighted, others are normal

D. The list will not render because of invalid classes

Solution

1. Step 1: Understand the class effects

   active highlights the item, disabled greys out and disables interaction.

2. Step 2: Apply classes to list items

   'Home' is active (highlighted), 'Profile' normal, 'Messages' disabled (greyed and unclickable).

3. Final Answer:

   A list with 'Home' highlighted, 'Profile' normal, and 'Messages' greyed out and unclickable -> Option B

4. Quick Check:

   Active = highlight, Disabled = greyed out [OK]

Hint: Active highlights, disabled greys out list items [OK]

Common Mistakes:

• Thinking disabled items are clickable
• Assuming all items look the same
• Confusing active and disabled effects

4. Identify the error in this Bootstrap list group code:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item active">Item 2</li>
  <li class="list-group-item disabled">Item 3</li>
  <li class="list-group-item" disabled>Item 4</li>
</ul>

medium

A. The last <li> uses an invalid disabled attribute instead of class

B. The active class cannot be used on list items

C. The list-group-item class is missing on the second item

D. The ul element should not have the list-group class

Solution

1. Step 1: Check usage of disabled

   Bootstrap requires disabled as a class, not as an HTML attribute on <li>.

2. Step 2: Identify the incorrect line

   The last <li> uses disabled as an attribute, which is invalid and won't style properly.

3. Final Answer:

   The last <li> uses an invalid disabled attribute instead of class -> Option A

4. Quick Check:

   Use class="disabled", not disabled attribute [OK]

Hint: Use class="disabled" not disabled attribute on list items [OK]

Common Mistakes:

• Using disabled as an attribute instead of class
• Thinking active class is invalid
• Missing list-group-item class on items

5. You want a clickable list group where each item acts like a button and highlights on hover. Which is the correct Bootstrap structure?

hard

A. <div class="list-group">
<button class="list-group-item">Item 1</button>
<button class="list-group-item">Item 2</button>
</div>

B. <ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>

C. <ol class="list-group">
<li class="list-group-item-action">Item 1</li>
<li class="list-group-item-action">Item 2</li>
</ol>

D. <div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Item 2</a>
</div>

Solution

1. Step 1: Identify clickable list group items

   Bootstrap uses <a> tags with classes list-group-item and list-group-item-action for clickable items.

2. Step 2: Check other options

   <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> </ul> uses non-clickable <li>, A misses list-group-item-action, D uses li without proper container and classes.

3. Final Answer:

   Div with <a> tags having list-group-item and list-group-item-action classes -> Option D

4. Quick Check:

   Clickable list items = <a> + list-group-item-action [OK]

Hint: Clickable list items use <a> with list-group-item-action class [OK]

Common Mistakes:

• Using <li> without action class for clickable items
• Missing list-group-item-action class
• Using buttons without proper classes