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.