Bootsrapmarkup~30 mins

Text transform utilities in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Text Transform Utilities with Bootstrap

📖 Scenario: You are creating a simple webpage that shows different text styles using Bootstrap's text transform utilities. This helps users see how text can be changed to uppercase, lowercase, or capitalized.

🎯 Goal: Build a webpage with a heading and three paragraphs. Each paragraph uses a different Bootstrap text transform utility: text-uppercase, text-lowercase, and text-capitalize.

📋 What You'll Learn

Use Bootstrap 5 CSS via CDN

Create a heading with the text 'Text Transform Examples'

Add three paragraphs with the exact texts: 'this is uppercase', 'THIS IS LOWERCASE', and 'this is capitalized'

Apply Bootstrap classes text-uppercase, text-lowercase, and text-capitalize to the paragraphs respectively

Use semantic HTML5 elements and ensure the page is responsive

💡 Why This Matters

🌍 Real World

Text transform utilities are commonly used in websites to style text consistently without writing custom CSS. This project shows how to quickly apply these styles using Bootstrap.

💼 Career

Knowing how to use Bootstrap utilities helps web developers build clean, accessible, and responsive user interfaces faster, which is valuable in many web development jobs.

Progress0 / 4 steps

Create the basic HTML structure with Bootstrap

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add a <main> element with a <h1> heading that says Text Transform Examples.

Bootsrap




    
    
    Text Transform Utilities
    


    
        Text Transform Examples

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section.

Add paragraphs with text transform classes

Inside the <main> element, add three <p> paragraphs with these exact texts: this is uppercase, THIS IS LOWERCASE, and this is capitalized. Do not add any classes yet.

Bootsrap




    
    
    Text Transform Utilities
    


    
        Text Transform Examples

Need a hint?

Make sure to add exactly three paragraphs with the specified texts inside the <main> element.

Apply Bootstrap text transform classes to paragraphs

Add the Bootstrap class text-uppercase to the first paragraph, text-lowercase to the second paragraph, and text-capitalize to the third paragraph.

Bootsrap




    
    
    Text Transform Utilities
    


    
        Text Transform Examples
        
        this is uppercase
        THIS IS LOWERCASE
        this is capitalized

Need a hint?

Use the exact Bootstrap classes text-uppercase, text-lowercase, and text-capitalize on the paragraphs in order.

Add a container and improve accessibility

Wrap the <main> content inside a <div> with the Bootstrap class container for proper spacing. Add an aria-label attribute with the value Text transform examples section to the <main> element.

Bootsrap




    
    
    Text Transform Utilities
    


    
        
        Text Transform Examples
        this is uppercase
        THIS IS LOWERCASE
        this is capitalized

Need a hint?

Wrap all content inside <main> with a <div> that has the class container. Add the aria-label attribute to <main>.