Color utilities (text, background) in Bootsrap - Mini Project: Build & Apply

Bootstrap Color Utilities: Text and Background

📖 Scenario: You are creating a simple webpage section to display messages with different colors using Bootstrap's color utilities. This helps users quickly see the importance or type of each message by color.

🎯 Goal: Build a webpage with a heading and three paragraphs. Each paragraph uses Bootstrap color utility classes to show different text colors and background colors.

📋 What You'll Learn

Use Bootstrap 5 CSS via CDN in the <head>

Create a <main> section with a heading <h1> that says 'Color Utilities Demo'

Add three paragraphs inside <main> with these exact texts:

Success message, Warning message, and Error message

Apply Bootstrap text color utility classes text-success, text-warning, and text-danger respectively to these paragraphs

Add background color utility classes bg-light, bg-warning, and bg-danger respectively to these paragraphs

Ensure the page uses semantic HTML and includes the required meta tags for charset and viewport

💡 Why This Matters

🌍 Real World

Using Bootstrap color utilities is common in web projects to quickly style text and backgrounds for alerts, messages, and UI elements without writing custom CSS.

💼 Career

Knowing how to use Bootstrap's utility classes helps front-end developers build consistent, accessible, and visually appealing interfaces faster, which is valuable in many web development jobs.

1

Setup the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en" in the <html> tag. Inside the <head>, add <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1">. Also include the Bootstrap 5 CSS CDN link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Add an empty <main> section inside the <body>.

Bootsrap

Hint

Remember to add the lang attribute to <html> and include the Bootstrap CSS link inside <head>.

2

Add a heading inside the main section

Inside the existing <main> tag, add a heading <h1> with the exact text Color Utilities Demo.

Bootsrap

    
    
    
    Color Utilities Demo


    
        
        
    

Hint

Use the <h1> tag inside <main> with the exact text.

3

Add three paragraphs with Bootstrap text color utilities

Below the heading inside <main>, add three paragraphs with these exact texts and text color classes: <p class="text-success">Success message</p>, <p class="text-warning">Warning message</p>, and <p class="text-danger">Error message</p>.

Bootsrap

    
    
    
    Color Utilities Demo


    
        Color Utilities Demo
        
        
    

Hint

Use the exact class names text-success, text-warning, and text-danger on the paragraphs with the exact texts.

4

Add background color utilities to the paragraphs

Add these Bootstrap background color utility classes to the three paragraphs respectively: bg-light to the 'Success message' paragraph, bg-warning to the 'Warning message' paragraph, and bg-danger to the 'Error message' paragraph. Keep the existing text color classes.

Bootsrap

    
    
    
    Color Utilities Demo


    
        Color Utilities Demo
        
        
    

Hint

Add the background color classes alongside the existing text color classes in the class attribute.

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