Navbar color schemes in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the navbar text color suitable for a dark background.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-[1]">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

Drag options to blanks, or click blank then click option'

Asuccess

Bprimary

Cdark

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using navbar-light which is for light backgrounds.

Confusing background color class with text color class.

The class navbar-dark sets the navbar text color suitable for dark backgrounds. Combined with bg-dark it creates a dark navbar.

2fill in blank

medium

Complete the code to set the navbar background color to primary blue.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Alight

Bdark

Cprimary

Dwarning

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-dark which is blackish.

Using bg-light which is very light.

The class bg-primary sets the background color to Bootstrap's primary blue color.

3fill in blank

hard

Fix the error in the navbar class to make the text readable on a light background.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Adark

Bprimary

Cwarning

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using navbar-dark which makes text hard to read on light backgrounds.

Omitting the navbar text color class.

For a light background, use navbar-light so the text is dark and readable.

4fill in blank

hard

Fill both blanks to create a navbar with dark text on a warning background.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-[1] bg-[2]">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

Drag options to blanks, or click blank then click option'

Alight

Bdark

Cwarning

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using navbar-dark with bg-warning which makes text hard to read.

Mixing up background and text color classes.

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

5fill in blank

hard

Fill all three blanks to create a navbar with uppercase brand text, light text color, and a success background.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-[1] bg-[2]">
  <a class="navbar-brand text-[3]" href="#">Brand</a>
</nav>

Drag options to blanks, or click blank then click option'

Alight

Bdark

Csuccess

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using navbar-light which makes text dark and hard to read on green.

Forgetting to add text-uppercase for uppercase text.

Use navbar-dark for light text color, bg-success for green background, and text-uppercase to make brand text uppercase.

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