Breadcrumb component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a breadcrumb container using Bootstrap.

Bootsrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb[1]">
  </ol>
</nav>

Drag options to blanks, or click blank then click option'

A-item

B-nav

C-list

Attempts:

3 left

💡 Hint

Common Mistakes

Adding suffixes like '-item' or '-nav' to the breadcrumb class on the

element.

Forgetting to add the breadcrumb class at all.

The breadcrumb class is applied directly to the <ol> element without any suffix. So the correct class is just breadcrumb.

2fill in blank

medium

Complete the code to add a breadcrumb item that is a link.

Bootsrap

<li class="breadcrumb-item"><a href="[1]">Home</a></li>

Drag options to blanks, or click blank then click option'

A/

B#home

Chome.html

Dindex.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using fragment identifiers like #home which do not navigate to the homepage.

Using relative file names that might not work depending on folder structure.

The root or home page is usually linked with / as the href to represent the site root.

3fill in blank

hard

Fix the error in the breadcrumb item that marks the current page.

Bootsrap

<li class="breadcrumb-item active" aria-current="[1]">Library</li>

Drag options to blanks, or click blank then click option'

Apage

Blocation

Cstep

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid values like 'true' or 'location' for aria-current.

Omitting the aria-current attribute on the active breadcrumb item.

The correct value for aria-current to indicate the current page in a breadcrumb is page.

4fill in blank

hard

Fill both blanks to create a breadcrumb with two items: a link and the current page.

Bootsrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="[1]">Home</a></li>
    <li class="breadcrumb-item active" aria-current="[2]">Library</li>
  </ol>
</nav>

Drag options to blanks, or click blank then click option'

A/

Bpage

Cstep

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect href values like '#' for the home link.

Using wrong aria-current values like 'step' for the active item.

The first breadcrumb item links to the root path /. The active breadcrumb item uses aria-current="page" to indicate the current page.

5fill in blank

hard

Fill all three blanks to create a breadcrumb with three items: Home link, Library link, and current page.

Bootsrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="[1]">Home</a></li>
    <li class="breadcrumb-item"><a href="[2]">Library</a></li>
    <li class="breadcrumb-item active" aria-current="[3]">Data</li>
  </ol>
</nav>

Drag options to blanks, or click blank then click option'

A/

B/library

Cpage

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' as href for links instead of real paths.

Using wrong aria-current values or omitting it on the active item.

The Home link points to /, the Library link points to /library, and the current page uses aria-current="page".