Navbar color schemes in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a navbar in a website?

A navbar helps users navigate the website by showing links to important pages. It usually stays at the top and is easy to find.

beginner

How do you change the color scheme of a Bootstrap navbar?

You add classes like navbar-light or navbar-dark to set text color, and bg-primary, bg-dark, or other background classes to change the background color.

beginner

What does the class navbar-dark do in Bootstrap?

It makes the navbar text and links light-colored so they show well on dark backgrounds.

beginner

Which Bootstrap class would you use for a light background navbar with dark text?

Use <code>navbar-light</code> with a light background class like <code>bg-light</code>.

beginner

Why is it important to choose the right navbar color scheme?

Good color contrast helps users read the links easily and improves website accessibility and user experience.

Which class combination creates a dark navbar with light text in Bootstrap?

A navbar-dark bg-dark

B navbar-light bg-dark

C navbar-dark bg-light

D navbar-light bg-light

The navbar-dark class makes text light, and bg-dark sets a dark background.

What class would you use for a navbar with dark text on a light background?

A navbar-light bg-light

B navbar-dark bg-dark

C navbar-dark bg-light

D navbar-light bg-dark

Use navbar-light for dark text and bg-light for a light background.

Why should navbar text contrast well with its background?

A To make the navbar look colorful

B To reduce website loading time

C To improve readability and accessibility

D To add animations

Good contrast helps users read links easily and improves accessibility.

Which Bootstrap class changes the navbar background color?

A navbar-light

B bg-primary

C nav-link

D navbar-dark

bg-primary and similar classes set the background color.

If you want a navbar with white text on a blue background, which classes do you use?

A navbar-dark bg-light

B navbar-light bg-primary

C navbar-light bg-light

D navbar-dark bg-primary

navbar-dark makes text light, and bg-primary sets a blue background.

Explain how to create a Bootstrap navbar with a dark background and light text. Include the classes you would use and why.

Think about which classes control text color and which control background color.

Describe why choosing the right color scheme for a navbar is important for website users.

Consider how users see and interact with the navbar links.

Practice

1. Which Bootstrap class should you use to make the navbar text dark and suitable for a light background?

easy

A. navbar-dark

B. navbar-light

C. bg-dark

D. text-light

Solution

1. Step 1: Understand navbar text color classes

   The navbar-light class makes text dark for readability on light backgrounds.

2. Step 2: Match class to background type

   Since the background is light, navbar-light is appropriate, unlike navbar-dark which is for dark backgrounds.

3. Final Answer:

   navbar-light -> Option B

4. Quick Check:

   Light background needs dark text = navbar-light [OK]

Hint: Light background? Use navbar-light for dark text [OK]

Common Mistakes:

• Confusing navbar-light with navbar-dark
• Using bg-dark instead of navbar color scheme
• Applying text-light on light backgrounds

2. Which of the following is the correct way to apply a dark navbar with a dark background in Bootstrap?

easy

A. <nav class='navbar navbar-light bg-dark'>

B. <nav class='navbar navbar-dark bg-light'>

C. <nav class='navbar navbar-light bg-light'>

D. <nav class='navbar navbar-dark bg-dark'>

Solution

1. Step 1: Identify the correct navbar text color for dark background

   For dark backgrounds, navbar-dark ensures text is light and readable.

2. Step 2: Match background color class

   The background class bg-dark sets a dark background color.

3. Final Answer:

   <nav class='navbar navbar-dark bg-dark'> -> Option D

4. Quick Check:

   Dark background needs navbar-dark + bg-dark [OK]

Hint: Dark background? Use navbar-dark with bg-dark [OK]

Common Mistakes:

• Mixing navbar-light with bg-dark
• Using bg-light with navbar-dark
• Forgetting to include both navbar and bg classes

3. What will be the visible text color of the navbar brand in this code?

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

medium

A. Dark text color

B. Primary blue text color

C. Light text color

D. Default black text color

Solution

1. Step 1: Understand navbar-dark effect on text

   The navbar-dark class makes text light-colored for contrast on dark backgrounds.

2. Step 2: Recognize bg-primary background

   bg-primary is a dark blue background, so light text is used for readability.

3. Final Answer:

   Light text color -> Option C

4. Quick Check:

   navbar-dark + dark bg = light text [OK]

Hint: navbar-dark means light text on dark backgrounds [OK]

Common Mistakes:

• Assuming text matches bg-primary color
• Thinking navbar-dark means dark text
• Ignoring the effect of navbar-dark on text color

4. Identify the error in this navbar code snippet:

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

medium

A. Using navbar-light with a dark background

B. Missing navbar-expand class

C. Incorrect use of navbar-brand class

D. Missing href attribute in anchor tag

Solution

1. Step 1: Check navbar color scheme consistency

   The class navbar-light is for light backgrounds, but bg-dark sets a dark background.

2. Step 2: Understand readability issue

   This mismatch causes dark background with dark text, reducing readability.

3. Final Answer:

   Using navbar-light with a dark background -> Option A

4. Quick Check:

   navbar-light must pair with light backgrounds [OK]

Hint: Match navbar-light with light bg, navbar-dark with dark bg [OK]

Common Mistakes:

• Ignoring navbar-expand necessity
• Thinking navbar-brand needs href fix
• Confusing navbar-light and navbar-dark usage

5. You want a navbar with a light background but dark text and a custom green background color using Bootstrap utilities. Which class combination is correct?

hard

A. navbar navbar-light bg-success

B. navbar navbar-dark bg-light

C. navbar navbar-light bg-light

D. navbar navbar-dark bg-success

Solution

1. Step 1: Identify background color and text color needs

   You want a light background with dark text. The green background bg-success is a bright green, considered light.

2. Step 2: Choose matching navbar text color class

   For light backgrounds, navbar-light is used to make text dark and readable.

3. Final Answer:

   navbar navbar-light bg-success -> Option A

4. Quick Check:

   Light bg (green) needs navbar-light for dark text [OK]

Hint: Light or bright bg? Use navbar-light for dark text [OK]

Common Mistakes:

• Using navbar-dark with bright green background
• Choosing bg-light instead of desired green
• Mixing navbar-dark with light backgrounds