List styles (unstyled, inline) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap list?

Given the following HTML code using Bootstrap classes, what will the list look like when rendered in a browser?

Bootsrap

<ul class="list-unstyled">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

A A horizontal list with items displayed side by side without bullet points.

B A horizontal list with items displayed side by side with bullet points.

C A vertical list with bullet points before each fruit name.

D A vertical list with no bullet points and default spacing between items.

💡 Hint

The class 'list-unstyled' removes the default bullet points and spacing.

The 'list-unstyled' class in Bootstrap removes the default bullet points and left padding, so the list items appear vertically stacked but without bullets.

❓ rendering

intermediate

How does this Bootstrap inline list render?

Look at this Bootstrap list code. What is the visual arrangement of the list items?

Bootsrap

<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">About</li>
  <li class="list-inline-item">Contact</li>
</ul>

A The list items appear vertically stacked without bullet points.

B The list items appear horizontally side by side without bullet points.

C The list items appear horizontally side by side with bullet points.

D The list items appear vertically stacked with bullet points.

💡 Hint

The 'list-inline' class makes list items display inline without bullets.

Bootstrap's 'list-inline' class combined with 'list-inline-item' makes list items display horizontally in a row without bullet points.

❓ selector

advanced

Which CSS selector does Bootstrap use to remove bullet points in 'list-unstyled'?

Bootstrap's 'list-unstyled' class removes bullet points from lists. Which CSS property and selector combination achieves this effect?

A .list-unstyled { display: flex; flex-direction: row; }

B .list-unstyled li { display: inline; }

C .list-unstyled { list-style-type: none; padding-left: 0; }

D .list-unstyled li { text-decoration: none; }

💡 Hint

Removing bullet points involves the 'list-style-type' property.

The 'list-unstyled' class sets 'list-style-type' to 'none' and removes left padding to hide bullets and align the list flush left.

❓ layout

advanced

What layout behavior does 'list-inline-item' enforce on list items?

In Bootstrap, what CSS display property does the 'list-inline-item' class apply to list items?

A display: inline-block;

B display: block;

C display: flex;

D display: grid;

💡 Hint

Inline items need to flow horizontally but keep block features like padding.

'list-inline-item' uses 'display: inline-block' so items line up horizontally but can have width, height, and padding.

❓ accessibility

expert

How to improve accessibility for inline navigation lists?

You have a Bootstrap inline list used as a navigation menu. Which ARIA role should you add to the

element to improve accessibility?

A role="navigation"

B role="menu"

C role="list"

D role="listitem"

💡 Hint

Navigation menus should have a role that indicates their purpose to screen readers.

Adding role="navigation" to the

helps screen readers identify the list as a navigation menu, improving accessibility.