List group component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap list group code?

Look at the following HTML code using Bootstrap classes. What will you see rendered in the browser?

Bootsrap

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item active">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

A A vertical list with three items; all items have the same background and no highlight.

B A horizontal list with three items; the second item is bold but no background color change.

C A vertical list with three items; the first item is highlighted with a green background.

D A vertical list with three items; the second item has a blue background and white text indicating it is active.

💡 Hint

Remember that the class 'active' in Bootstrap list groups highlights the item with a special background and text color.

The 'list-group-item active' class combination applies a blue background and white text to highlight the active item in the vertical list.

❓ selector

intermediate

Which CSS selector targets only active items in a Bootstrap list group?

You want to style only the active items in a Bootstrap list group. Which CSS selector will select them correctly?

A .list-group > .active

B .list-group .active-item

C .list-group-item.active

D .list-group-item :active

💡 Hint

Look for the class combination that matches both 'list-group-item' and 'active' on the same element.

The selector '.list-group-item.active' selects elements with both classes 'list-group-item' and 'active'. Other options either use invalid class names or pseudo-classes.

❓ layout

advanced

How to make a Bootstrap list group horizontal on large screens only?

You want your Bootstrap list group to display horizontally only on large screens (≥992px) and vertically on smaller screens. Which class should you add?

A Add class 'list-group-horizontal' to the <ul> element.

B Add class 'list-group-horizontal-lg' to the <ul> element.

C Add class 'd-flex flex-row' to the <ul> element.

D Add class 'list-group-horizontal-md' to the <ul> element.

💡 Hint

Bootstrap provides responsive horizontal list group classes with breakpoints like '-sm', '-md', '-lg'.

The class 'list-group-horizontal-lg' makes the list group horizontal only on large screens and above, keeping it vertical on smaller screens.

❓ accessibility

advanced

Which ARIA role is best for a Bootstrap list group to improve accessibility?

To make a Bootstrap list group more accessible for screen readers, which ARIA role should you add to the

element?

A role="list"

B role="menu"

C role="listbox"

D role="navigation"

💡 Hint

A list group is a simple list, so use the ARIA role that matches a list structure.

The role 'list' tells assistive technologies that the element is a list, improving semantic meaning without confusing it with menus or navigation.

🧠 Conceptual

expert

What happens if you nest a

Consider this code snippet:

• Item 2

What is the expected behavior and accessibility impact?

A The button renders styled as a list group item and is keyboard accessible; however, nesting a button directly inside a <ul> is invalid HTML and may cause accessibility issues.

B The button will not be styled as a list group item and will behave like a normal button outside the list group styling.

C The browser will automatically convert the button into a <li> element to fix the invalid nesting.

D The button will cause a runtime error and prevent the page from rendering.

💡 Hint

Think about HTML semantics and valid nesting rules for lists and buttons.

While Bootstrap styles buttons with 'list-group-item' to look like list items, placing a

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