Color utilities (text, background) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What color will the text be?

Given the following HTML snippet using Bootstrap color utilities, what color will the text appear as in the browser?

Bootsrap

<p class="text-primary">Hello, world!</p>

A The text will be blue.

B The text will be gray.

C The text will be green.

D The text will be red.

💡 Hint

Bootstrap's text-primary class applies the primary theme color to text.

The text-primary class in Bootstrap applies the primary theme color, which by default is blue. So the text will appear blue in the browser.

❓ selector

intermediate

Which class sets a red background?

Which Bootstrap utility class will set the background color of an element to red?

A bg-danger

B text-danger

C bg-primary

D text-danger-bg

💡 Hint

Background color classes start with 'bg-'.

The bg-danger class sets the background color to red in Bootstrap. The text-danger class changes text color, not background.

🧠 Conceptual

advanced

What happens if you combine text and background utilities?

Consider this HTML: <div class="text-success bg-danger">Sample Text</div>. What will be the text and background colors?

Bootsrap

<div class="text-success bg-danger">Sample Text</div>

A Both text and background will be red.

B Text will be green, background will be red.

C Text will be red, background will be green.

D Both text and background will be green.

💡 Hint

Text and background classes control different CSS properties.

The text-success class sets the text color to green, while bg-danger sets the background color to red. They work independently.

❓ accessibility

advanced

Which color utility combination improves text readability?

You want to ensure good contrast for accessibility. Which combination of Bootstrap classes provides the best readable text on a dark background?

A text-secondary on bg-dark

B text-dark on bg-dark

C text-muted on bg-dark

D text-light on bg-dark

💡 Hint

Light text on dark background improves contrast.

The text-light class applies a light color to text, which contrasts well on a bg-dark background, improving readability and accessibility.

📝 Syntax

expert

What error occurs with this invalid class name?

What happens if you use this class in Bootstrap: bg--primary (note the double dash)?

Bootsrap

<div class="bg--primary">Test</div>

A Bootstrap applies a default background color.

B SyntaxError in HTML parsing.

C The background color will not apply; no error shown.

D The page crashes with a runtime error.

💡 Hint

Invalid class names do not cause errors but do not apply styles.

Using bg--primary is not a valid Bootstrap class. The browser ignores it, so no background color is applied. No syntax or runtime errors occur.