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.