Navbar basics in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap navbar code?

Look at the following Bootstrap navbar code. What will you see when this code runs in a browser?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</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>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

A Only the brand name is visible, and the links are always hidden with no toggle button.

B A vertical sidebar with the brand name at the top and three links stacked below it.

C A horizontal navbar with a brand name on the left and three links: Home (highlighted), Features, and Pricing. On small screens, the links collapse behind a toggle button.

D A footer bar with the brand name centered and links aligned to the right.

💡 Hint

Think about how Bootstrap's navbar-expand-lg and collapse classes work for responsiveness.

The code creates a responsive horizontal navbar with a brand on the left and three links. The 'navbar-expand-lg' class means the links show horizontally on large screens but collapse behind a toggle button on smaller screens. The 'active' class highlights the Home link.

❓ selector

intermediate

Which CSS selector targets only the active link in this Bootstrap navbar?

Given a Bootstrap navbar where the active link has class 'nav-link active', which CSS selector will style only the active link?

A .nav-link:focus

B .nav-item .nav-link

C .navbar-nav > li > a

D .nav-link.active

💡 Hint

Look for the selector that matches both classes on the same element.

The selector '.nav-link.active' matches elements with both classes 'nav-link' and 'active'. This targets only the active link. Other selectors either target all links or links on focus.

🧠 Conceptual

advanced

What ARIA attribute improves accessibility for the navbar toggle button?

In a Bootstrap navbar, the toggle button controls showing and hiding the menu on small screens. Which ARIA attribute on the button helps screen readers understand this behavior?

A aria-expanded

B aria-hidden

C aria-label

D aria-pressed

💡 Hint

This attribute indicates if the menu is currently open or closed.

The 'aria-expanded' attribute on the toggle button tells assistive technologies whether the collapsible menu is expanded (true) or collapsed (false). This improves navigation for users relying on screen readers.

❓ layout

advanced

How does the 'navbar-expand-lg' class affect the navbar layout?

What effect does adding the class 'navbar-expand-lg' have on a Bootstrap navbar's layout?

A The navbar links are horizontal on large screens and collapse into a toggle menu on smaller screens.

B The navbar is always vertical regardless of screen size.

C The navbar links are hidden on large screens and visible only on small screens.

D The navbar links are always visible and never collapse.

💡 Hint

Think about how 'expand-lg' controls responsiveness at the large breakpoint.

'navbar-expand-lg' means the navbar expands horizontally on large (lg) screens and above. On smaller screens, the links collapse behind a toggle button to save space.

📝 Syntax

expert

What error occurs if the toggle button's data-bs-target does not match the collapse div's id?

In this Bootstrap navbar, the toggle button has data-bs-target="#menu" but the collapse div has id="navbarNav". What happens when you click the toggle button?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" 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" href="#">Link</a></li>
    </ul>
  </div>
</nav>

A The menu opens and closes normally without issues.

B Clicking the toggle button does nothing; the menu does not open or close.

C A JavaScript error is thrown in the console.

D The page reloads unexpectedly.

💡 Hint

The toggle button must target the correct collapse element by id.

If data-bs-target does not match any element's id, Bootstrap cannot find the menu to toggle. So clicking the button does nothing, but no error is thrown.

Practice

1. What is the main purpose of a navbar in a website?

easy

A. To help users navigate through different pages easily

B. To display large images on the homepage

C. To add background music to the site

D. To store user data securely

Solution

1. Step 1: Understand the role of a navbar

   A navbar is a menu bar that helps users find and visit different parts of a website.

2. Step 2: Match the purpose with options

   Only To help users navigate through different pages easily describes navigation, which is the navbar's main job.

3. Final Answer:

   To help users navigate through different pages easily -> Option A

4. Quick Check:

   Navbar = Navigation aid [OK]

Hint: Navbar is for navigation menus, not media or data [OK]

Common Mistakes:

• Confusing navbar with image or media display
• Thinking navbar stores data
• Assuming navbar plays audio

2. Which of the following is the correct Bootstrap class to create a responsive navbar container?

easy

A. <div class='navbar-container'>

B. <section class='navbar-expand'>

C. <header class='nav-responsive'>

D. <nav class='navbar navbar-expand-lg'>

Solution

1. Step 1: Identify Bootstrap navbar syntax

   Bootstrap uses navbar and navbar-expand-lg classes on a <nav> element for responsive navbars.

2. Step 2: Compare options with Bootstrap docs

   Only <nav class='navbar navbar-expand-lg'> uses correct element and classes as per Bootstrap standards.

3. Final Answer:

   <nav class='navbar navbar-expand-lg'> -> Option D

4. Quick Check:

   Bootstrap navbar uses navbar navbar-expand-lg [OK]

Hint: Bootstrap navbars use <nav> with navbar-expand classes [OK]

Common Mistakes:

• Using wrong HTML elements like <div> or <header>
• Missing 'navbar' class
• Using incomplete or incorrect class names

3. What will be the visual result of this Bootstrap navbar code snippet?

<nav class='navbar navbar-expand-md navbar-light bg-light'>
  <a class='navbar-brand' href='#'>MySite</a>
  <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navMenu'>
    <span class='navbar-toggler-icon'></span>
  </button>
  <div class='collapse navbar-collapse' id='navMenu'>
    <ul class='navbar-nav'>
      <li class='nav-item'><a class='nav-link' href='#'>Home</a></li>
      <li class='nav-item'><a class='nav-link' href='#'>About</a></li>
    </ul>
  </div>
</nav>

medium

A. A dark navbar with fixed menu always visible

B. A light-colored navbar with brand name and collapsible menu toggler on small screens

C. A navbar without any menu items visible

D. A navbar that does not collapse on small screens

Solution

1. Step 1: Analyze classes and structure

   The navbar uses navbar-light bg-light for a light style and navbar-expand-md to collapse below medium screen size.

2. Step 2: Understand toggler and collapse behavior

   The button toggles the menu on small screens, so menu items are hidden initially on small devices and shown on larger screens.

3. Final Answer:

   A light-colored navbar with brand name and collapsible menu toggler on small screens -> Option B

4. Quick Check:

   navbar-expand-md + navbar-light = collapsible light navbar [OK]

Hint: Look for navbar-expand breakpoint and color classes [OK]

Common Mistakes:

• Confusing light and dark navbar classes
• Ignoring collapse behavior on small screens
• Assuming menu is always visible

4. Identify the error in this Bootstrap navbar code snippet:

<nav class='navbar navbar-expand-lg navbar-dark bg-dark'>
  <a class='navbar-brand' href='#'>Site</a>
  <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#menu'>
    <span class='navbar-toggler-icon'></span>
  </button>
  <div class='collapse navbar-collapse' id='menu'>
    <ul class='navbar-nav'>
      <li class='nav-item'><a class='nav-link' href='#'>Home</a></li>
    </ul>
  </div>
</nav>

medium

A. The button uses old data attributes; should use data-bs-toggle and data-bs-target

B. Missing navbar-brand class on the brand link

C. The nav-item class is incorrect; should be nav-link

D. The navbar is missing a background color class

Solution

1. Step 1: Check Bootstrap 5 data attribute syntax

   Bootstrap 5 requires data-bs-toggle and data-bs-target instead of data-toggle and data-target.

2. Step 2: Verify other classes

   The brand link has correct class, nav-item and nav-link are used properly, and background class bg-dark is present.

3. Final Answer:

   The button uses old data attributes; should use data-bs-toggle and data-bs-target -> Option A

4. Quick Check:

   Bootstrap 5 uses data-bs-* attributes [OK]

Hint: Bootstrap 5 uses data-bs-toggle, not data-toggle [OK]

Common Mistakes:

• Using old Bootstrap 4 data attributes
• Confusing nav-item and nav-link classes
• Forgetting background color class

5. You want a navbar that always stays visible at the top when scrolling and collapses on small screens. Which combination of Bootstrap classes should you use?

hard

A. navbar fixed-bottom navbar-expand-md navbar-light bg-light

B. navbar fixed-top navbar-expand-sm navbar-light bg-light

C. navbar sticky-top navbar-expand-lg navbar-dark bg-dark

D. navbar sticky-top navbar-expand-xl navbar-light bg-transparent

Solution

1. Step 1: Understand fixed vs sticky navbar

   fixed-top fixes navbar always at top, sticky-top sticks it after scrolling. Both keep navbar visible, but sticky-top is preferred for smooth behavior.

2. Step 2: Check collapse breakpoint and color classes

   navbar-expand-lg collapses below large screens, navbar-dark bg-dark gives dark style with good contrast.

3. Step 3: Evaluate options

   navbar sticky-top navbar-expand-lg navbar-dark bg-dark uses sticky-top, navbar-expand-lg, navbar-dark, and bg-dark, matching requirements best.

4. Final Answer:

   navbar sticky-top navbar-expand-lg navbar-dark bg-dark -> Option C

5. Quick Check:

   Sticky-top + navbar-expand-lg + dark style = correct navbar [OK]

Hint: Use sticky-top and navbar-expand-lg for fixed, collapsible navbar [OK]

Common Mistakes:

• Choosing fixed-bottom instead of fixed-top or sticky-top
• Using navbar-expand-sm which collapses too early
• Ignoring color contrast for accessibility