Bootsrapmarkup~15 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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