Bird
Raised Fist0
Bootsrapmarkup~10 mins

Breadcrumb component in Bootsrap - Interactive Code Practice

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.

Practice

(1/5)
1. What is the main purpose of a Bootstrap breadcrumb component on a website?
easy
A. To create a navigation menu with dropdowns
B. To add buttons for form submission
C. To display images in a carousel format
D. To show the user's current location within the website's page hierarchy

Solution

  1. Step 1: Understand breadcrumb purpose

    Breadcrumbs help users know where they are on a website by showing the path they took.

  2. Step 2: Match purpose with options

    Only To show the user's current location within the website's page hierarchy describes showing the user's location in the page hierarchy.

  3. Final Answer:

    To show the user's current location within the website's page hierarchy -> Option D

  4. Quick Check:

    Breadcrumb = User location path [OK]
Hint: Breadcrumbs show navigation path, not menus or buttons [OK]
Common Mistakes:
  • Confusing breadcrumbs with navigation menus
  • Thinking breadcrumbs are for images or buttons
2. Which of the following is the correct HTML structure to start a Bootstrap breadcrumb for accessibility?
easy
A.
B.
    C.
    D.

    Solution

    1. Step 1: Identify Bootstrap breadcrumb container

      Bootstrap requires a

    2. Step 2: Compare options with correct structure

      Only uses

    3. Final Answer:

      <nav aria-label="breadcrumb"><ol class="breadcrumb"></ol></nav> -> Option A

    4. Quick Check:

      Use <nav aria-label="breadcrumb"> + <ol class="breadcrumb"> [OK]
    Hint: Breadcrumb uses
    Common Mistakes:
    • Using <ul> instead of <ol>
    • Missing aria-label for accessibility
    • Using <div> instead of <nav>
    3. Given this Bootstrap breadcrumb code, what will be the visual output in the browser? 
    <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>
    medium
    A. Breadcrumb items are displayed as a vertical list
    B. All breadcrumb items are clickable links
    C. A breadcrumb with clickable links 'Home' and 'Library', and 'Data' as plain text showing current page
    D. Breadcrumb shows only 'Data' as a link

    Solution

    1. Step 1: Analyze breadcrumb items

      First two items have class "breadcrumb-item" with links, last item has "active" class and aria-current="page" with no link.

    2. Step 2: Understand Bootstrap breadcrumb rendering

      Bootstrap shows clickable links for non-active items and plain text for the active item representing current page.

    3. Final Answer:

      A breadcrumb with clickable links 'Home' and 'Library', and 'Data' as plain text showing current page -> Option C

    4. Quick Check:

      Active item = plain text, others = links [OK]
    Hint: Active breadcrumb is plain text, others are links [OK]
    Common Mistakes:
    • Assuming active item is a link
    • Thinking breadcrumb is vertical by default
    • Assuming all items are clickable
    4. Identify the error in this Bootstrap breadcrumb code snippet: 
    <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active"><a href="#">Home</a></li>
    <li class="breadcrumb-item">Library</li>
  </ol>
</nav>
    medium
    A. The <ol> element should be replaced with <ul>
    B. The active breadcrumb item should not contain a link and must have aria-current="page"
    C. The breadcrumb-item class is missing on the second <li>
    D. The <nav> element is missing aria-label

    Solution

    1. Step 1: Check active breadcrumb rules

      The active breadcrumb item must not be a link and must have aria-current="page" for accessibility.

    2. Step 2: Identify errors in code

      The active item has a link and lacks aria-current="page", which is incorrect.

    3. Final Answer:

      The active breadcrumb item should not contain a link and must have aria-current="page" -> Option B

    4. Quick Check:

      Active item = plain text + aria-current="page" [OK]
    Hint: Active breadcrumb = plain text + aria-current="page" [OK]
    Common Mistakes:
    • Putting a link inside the active breadcrumb item
    • Forgetting aria-current="page" on active item
    • Using <ul> instead of <ol> for breadcrumb
    5. You want to create a breadcrumb with these pages: Home > Products > Electronics > Cameras, where 'Cameras' is the current page. Which code snippet correctly implements this with Bootstrap's breadcrumb component and accessibility best practices?
    hard

    Solution

    1. Step 1: Check breadcrumb structure and accessibility

      Use

    2. Step 2: Evaluate each option

      correctly uses

    3. Final Answer:

      Option A code snippet correctly implements Bootstrap breadcrumb with accessibility -> Option A

    4. Quick Check:

      Active item = plain text + aria-current="page" + correct container [OK]
    Hint: Active breadcrumb: plain text + aria-current="page" inside
    Common Mistakes:
    • Using <ul> instead of <ol>
    • Active breadcrumb as a link
    • Missing aria-current="page" on active item
    • Missing aria-label on <nav>
    Recommended

    Ready to prove it?

    Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

    10 questions~5 mineasy hard