Color utilities (text, background) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of Bootstrap's color utilities?

Bootstrap's color utilities let you quickly change text and background colors using simple classes, without writing custom CSS.

beginner

How do you change text color to primary in Bootstrap?

Add the class text-primary to your HTML element to make its text color the primary theme color.

beginner

Which class changes the background color to success in Bootstrap?

Use the class bg-success to set the background color to the success theme color.

beginner

What class would you use to make text color white on a dark background?

Use text-white to make text white, which is helpful on dark backgrounds for good contrast.

intermediate

How can you reset background color to transparent using Bootstrap utilities?

Use the class bg-transparent to remove any background color and make it transparent.

Which Bootstrap class changes text color to a warning color?

A text-warning

B bg-warning

C text-danger

D bg-danger

The class text-warning changes the text color to the warning theme color.

What class sets the background color to primary in Bootstrap?

A text-primary

B bg-primary

C background-primary

D primary-bg

The correct class is bg-primary to set background color to primary.

If you want white text on a dark background, which class should you use?

A text-white

B bg-dark

C bg-white

D text-dark

Use text-white to make text white, which stands out on dark backgrounds.

Which class removes background color making it transparent?

A bg-clear

B bg-reset

C bg-none

D bg-transparent

The class bg-transparent sets the background color to transparent.

To make text color red using Bootstrap utilities, which class is correct?

A text-red

B bg-danger

C text-danger

D bg-red

Use text-danger to apply the red (danger) color to text.

Explain how to use Bootstrap color utilities to change text and background colors.

Think about the class prefixes text- and bg-

Describe why using Bootstrap color utilities is helpful for web design.

Consider speed, consistency, and accessibility