Challenge - 5 Problems
Bootstrap Navbar Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ rendering
intermediate2:00remaining
What is the visual output of this Bootstrap navbar code?
Look at the following Bootstrap 5 navbar code snippet. What will you see rendered in the browser?
Bootsrap
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">MySite</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> </ul> </div> </div> </nav>
Attempts:
2 left
💡 Hint
Think about how Bootstrap's navbar-expand-lg class controls when the toggler appears and how the collapse class hides links on small screens.
✗ Incorrect
The 'navbar-expand-lg' class means the navbar links are shown horizontally on large screens and collapse behind the toggler on smaller screens. The brand is on the left by default. The toggler button appears on small screens to toggle the collapsed links.
📝 Syntax
intermediate1:30remaining
Which option correctly adds an accessible label to the navbar toggler button?
Bootstrap recommends adding an aria-label to the toggler button for accessibility. Which of these button codes correctly includes an accessible label?
Attempts:
2 left
💡 Hint
The aria-label attribute provides a text label directly on the element for screen readers.
✗ Incorrect
The aria-label attribute is the correct way to provide an accessible name for the button. aria-labelledby requires an element with the referenced id, aria-hidden hides the element from screen readers, and aria-description is not a valid ARIA attribute.
❓ selector
advanced1:30remaining
Which CSS selector targets only the navbar brand link inside a Bootstrap navbar?
You want to style only the brand link inside a Bootstrap navbar. Which CSS selector correctly targets it?
Attempts:
2 left
💡 Hint
Remember the brand link has the class 'navbar-brand' and is inside an element with class 'navbar'.
✗ Incorrect
The brand link itself has the class 'navbar-brand', so selecting '.navbar .navbar-brand' targets it inside any navbar. Option C looks for an 'a' inside '.navbar-brand' which is incorrect because 'navbar-brand' is on the 'a' itself. Option C selects a direct child which may not always be true. Option C selects an 'a' inside '.navbar-brand' which is incorrect.
❓ layout
advanced1:30remaining
What layout behavior does the class 'navbar-expand-md' provide in Bootstrap?
If you use the class 'navbar-expand-md' on a navbar, how does it behave on different screen sizes?
Attempts:
2 left
💡 Hint
The 'expand-md' means expand starting at medium screens and up.
✗ Incorrect
The 'navbar-expand-md' class makes the navbar links visible horizontally on medium (md) and larger screens. On smaller screens, the links collapse behind the toggler button.
🧠 Conceptual
expert2:00remaining
Why is it important to include the 'aria-controls' attribute on the navbar toggler button?
In Bootstrap navbars, the toggler button often has an attribute like aria-controls="navbarSupportedContent". Why is this attribute important for accessibility?
Attempts:
2 left
💡 Hint
Think about how screen readers announce controls and their relationships.
✗ Incorrect
The aria-controls attribute identifies the element that the button toggles. This helps screen reader users understand what content will be affected by the button, improving navigation and usability.