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.

Practice

1. Which Bootstrap class would you use to make text color red?

easy

A. bg-red

B. text-danger

C. text-red

D. bg-danger

Solution

1. Step 1: Understand Bootstrap text color classes

   Bootstrap uses text-{color} classes to change text color, where {color} is a predefined color name.

2. Step 2: Identify the correct class for red text

   The class text-danger applies a red color to text. The other options either apply background color or use incorrect class names.

3. Final Answer:

   text-danger -> Option B

4. Quick Check:

   Text color red = text-danger [OK]

Hint: Text color uses text-{color}, background uses bg-{color} [OK]

Common Mistakes:

• Confusing text and background classes
• Using non-existent classes like text-red
• Using bg-danger for text color

2. Which of the following is the correct syntax to set a blue background using Bootstrap?

easy

A. bg-blue

B. text-primary

C. background-blue

D. bg-primary

Solution

1. Step 1: Recall Bootstrap background color classes

   Bootstrap uses bg-{color} classes to set background colors, where {color} is a predefined color name.

2. Step 2: Identify the correct class for blue background

   The class bg-primary sets a blue background. The other options either set text color or use invalid class names.

3. Final Answer:

   bg-primary -> Option D

4. Quick Check:

   Background blue = bg-primary [OK]

Hint: Background color classes start with bg- [OK]

Common Mistakes:

• Using text-primary for background
• Using non-Bootstrap class names like bg-blue
• Confusing text and background prefixes

3. What color will the text have with this HTML snippet?

<p class="text-success">Success message</p>

medium

A. Green

B. Blue

C. Red

D. Yellow

Solution

1. Step 1: Identify the Bootstrap text color class

   The class text-success is used on the paragraph tag.

2. Step 2: Recall the color meaning of text-success

   In Bootstrap, text-success applies a green color to the text.

3. Final Answer:

   Green -> Option A

4. Quick Check:

   text-success = Green [OK]

Hint: Success means green in Bootstrap colors [OK]

Common Mistakes:

• Confusing success with danger (red)
• Mixing text and background colors
• Guessing blue or yellow incorrectly

4. You want to set a yellow background but wrote bg-warningg. What will happen?

medium

A. The text color will change to yellow

B. The background will be yellow as expected

C. The background will be transparent (no color)

D. The page will show an error

Solution

1. Step 1: Check the class name spelling

   The correct class for yellow background is bg-warning, but bg-warningg has an extra 'g' and is invalid.

2. Step 2: Understand how browsers handle invalid classes

   Invalid classes are ignored by the browser, so no background color will be applied, resulting in transparent background.

3. Final Answer:

   The background will be transparent (no color) -> Option C

4. Quick Check:

   Invalid class = no style applied [OK]

Hint: Check spelling carefully; invalid classes do nothing [OK]

Common Mistakes:

• Assuming a typo still applies the color
• Expecting an error message in browser
• Confusing background and text color effects

5. You want to create a button with white text on a red background using Bootstrap classes. Which combination is correct?

hard

A. class="btn bg-danger text-white"

B. class="btn text-danger bg-white"

C. class="btn bg-white text-danger"

D. class="btn bg-danger text-danger"

Solution

1. Step 1: Identify the class for red background

   The class bg-danger sets a red background color in Bootstrap.

2. Step 2: Identify the class for white text

   The class text-white sets the text color to white.

3. Step 3: Combine classes for desired effect

   Using btn bg-danger text-white applies a red background and white text on the button.

4. Final Answer:

   class="btn bg-danger text-white" -> Option A

5. Quick Check:

   Red background + white text = bg-danger + text-white [OK]

Hint: Background red = bg-danger, white text = text-white [OK]

Common Mistakes:

• Mixing text-danger (red text) with bg-danger (red background)
• Using bg-white for background when red is needed
• Using same color for text and background causing unreadable text