Breadcrumb component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap breadcrumb code?

Look at the following Bootstrap breadcrumb HTML. What will you see rendered in the browser?

Bootsrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

A A horizontal list with links: Home > Library > Data (Data is plain text, not a link)

B A vertical list with links: Home, Library, Data (all are links)

C A horizontal list with links: Home > Library > Data (all are links)

D A horizontal list with links: Home > Library (both links), Data (hidden)

💡 Hint

Remember that the last breadcrumb item is usually marked active and is not a link.

Bootstrap breadcrumb uses an ordered list with the last item marked active and not a link. This shows a horizontal breadcrumb trail with the last item as plain text.

❓ accessibility

intermediate

Which attribute ensures the breadcrumb is accessible to screen readers?

In Bootstrap breadcrumb navigation, which attribute is essential for accessibility to describe the breadcrumb region?

A aria-label="breadcrumb" on the <nav> element

B aria-current="page" on all <li> elements

C role="navigation" on the <ol> element

D tabindex="0" on the <nav> element

💡 Hint

Think about how screen readers identify the purpose of a navigation region.

The aria-label="breadcrumb" on the

element tells screen readers this navigation is a breadcrumb trail.

📝 Syntax

advanced

What error occurs with this breadcrumb code?

What error or problem will this Bootstrap breadcrumb code cause when rendered?

Bootsrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

A The <nav> element is missing the required role attribute

B The breadcrumb will render correctly with no errors

C The aria-current attribute is invalid on the active item

D The breadcrumb will render but the first <li> is not closed, causing invalid HTML

💡 Hint

Check if all tags are properly closed in the list.

The first

tag is not closed, which makes the HTML invalid and can cause rendering issues.

❓ layout

advanced

How to make breadcrumb items wrap on small screens?

By default, Bootstrap breadcrumb items stay on one line. Which CSS approach makes breadcrumb items wrap nicely on small screens?

A Add CSS: .breadcrumb { display: block; }

B Add CSS: .breadcrumb { flex-wrap: wrap; }

C Add CSS: .breadcrumb-item { white-space: nowrap; }

D Add CSS: .breadcrumb-item { display: inline-block; }

💡 Hint

Bootstrap breadcrumb uses flexbox by default.

The breadcrumb uses flexbox. Adding flex-wrap: wrap allows items to wrap to next line on small screens.

🧠 Conceptual

expert

What is the purpose of aria-current="page" in breadcrumb?

Why do we add aria-current="page" to the last breadcrumb item in Bootstrap?

A It disables the link on the last breadcrumb item

B It makes the last breadcrumb item visually bold

C It indicates to assistive technologies that this item represents the current page

D It hides the last breadcrumb item from screen readers

💡 Hint

Think about how screen readers know which page is active.

aria-current="page" tells screen readers the item is the current page, improving navigation clarity.