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