Navbar color schemes in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What color scheme does this Bootstrap navbar use?

Look at the navbar code below. What color scheme will the navbar have when rendered in a browser?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

A Light background with light text

B Light background with dark text

C Dark background with light text

D Transparent background with dark text

💡 Hint

The class 'navbar-dark' changes text color to light, and 'bg-primary' sets a dark blue background.

The 'navbar-dark' class makes the text light colored, suitable for dark backgrounds. The 'bg-primary' class applies a dark blue background. Together, they create a dark background with light text color scheme.

📝 Syntax

intermediate

Which option will cause a syntax error in this Bootstrap navbar?

Identify which navbar code snippet will cause a syntax error and fail to render correctly.

A

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

B

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

C

>van/<
>a/<dnarB>"#"=ferh "dnarb-rabvan"=ssalc a<  
>"thgil-gb thgil-rabvan rabvan"=ssalc van<

D

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

💡 Hint

Check if all tags are properly closed.

Option A is missing the closing '>' for the closing nav tag, causing a syntax error in HTML and preventing correct rendering.

❓ selector

advanced

Which CSS selector targets the navbar brand text in Bootstrap?

Given a Bootstrap navbar, which CSS selector correctly selects the brand text link for styling?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

A .navbar-brand a

B .navbar .navbar-brand

C nav > .brand

D .navbar-brand > nav

💡 Hint

The brand text has class 'navbar-brand' inside an element with class 'navbar'.

Option B selects any element with class 'navbar-brand' inside an element with class 'navbar', which matches the brand link. Other options are invalid selectors or select wrong elements.

❓ layout

advanced

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

What is the effect of adding 'navbar-expand-lg' to a Bootstrap navbar?

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-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
    </ul>
  </div>
</nav>

A Navbar expands only on extra small screens

B Navbar is always expanded horizontally on all screen sizes

C Navbar is always collapsed on all screen sizes

D Navbar expands horizontally on large screens and collapses on smaller screens

💡 Hint

'navbar-expand-lg' controls when the navbar changes from collapsed to expanded based on screen width.

The 'navbar-expand-lg' class makes the navbar show its full horizontal menu on large screens (lg and up) and collapse into a toggle menu on smaller screens.

❓ accessibility

expert

Which attribute improves accessibility for the navbar toggle button?

In a Bootstrap navbar, which attribute on the toggle button best helps screen reader users understand its purpose?

Bootsrap

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
</button>

A aria-label="Toggle navigation"

B alt="Toggle menu icon"

C tabindex="-1"

D role="button"

💡 Hint

Screen readers need a clear label describing the button's function.

The 'aria-label' attribute provides a descriptive text for screen readers, explaining the button toggles navigation. 'role="button"' is redundant on a button element, 'tabindex="-1"' removes keyboard focus, and 'alt' is for images, not buttons.