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

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.

1

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
        
    

Hint

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

2

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
        
    

Hint

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

3

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
    

Hint

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

4

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
    

Hint

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

Practice

1. Which Bootstrap class would you use to make all letters in a paragraph appear in uppercase?

easy

A. text-uppercase

B. text-lowercase

C. text-capitalize

D. text-bold

Solution

1. Step 1: Understand the purpose of each class

   text-uppercase changes all letters to uppercase, text-lowercase to lowercase, and text-capitalize capitalizes the first letter of each word.

2. Step 2: Match the requirement

   Since the question asks for all letters in uppercase, text-uppercase is the correct class.

3. Final Answer:

   text-uppercase -> Option A

4. Quick Check:

   Uppercase text = text-uppercase [OK]

Hint: Uppercase text uses text-uppercase class [OK]

Common Mistakes:

• Confusing text-capitalize with uppercase
• Using text-lowercase instead
• Thinking text-bold changes case

2. Which of the following is the correct way to apply lowercase text transformation in Bootstrap?

easy

A. <p class='text-lowercase-text'>Example</p>

B. <p class='lowercase-text'>Example</p>

C. <p class='text-lower'>Example</p>

D. <p class='text-lowercase'>Example</p>

Solution

1. Step 1: Recall Bootstrap text transform class syntax

   Bootstrap uses text-lowercase exactly as the class name for lowercase transformation.

2. Step 2: Identify the correct HTML usage

   The correct syntax is to add class='text-lowercase' inside the paragraph tag.

3. Final Answer:

   <p class='text-lowercase'>Example</p> -> Option D

4. Quick Check:

   Lowercase class = text-lowercase [OK]

Hint: Use exact class name text-lowercase for lowercase [OK]

Common Mistakes:

• Adding extra words like '-text' to class name
• Using incorrect class names like text-lower
• Forgetting to use quotes around class attribute

3. What will be the visual output of this HTML snippet?

<p class='text-capitalize'>hello world from bootstrap</p>

medium

A. Hello World From Bootstrap

B. hello world from bootstrap

C. HELLO WORLD FROM BOOTSTRAP

D. hello World From bootstrap

Solution

1. Step 1: Understand what text-capitalize does

   The text-capitalize class changes the first letter of each word to uppercase.

2. Step 2: Apply the transformation to the text

   "hello world from bootstrap" becomes "Hello World From Bootstrap" visually.

3. Final Answer:

   Hello World From Bootstrap -> Option A

4. Quick Check:

   Capitalize each word = text-capitalize [OK]

Hint: Capitalize means first letter uppercase in each word [OK]

Common Mistakes:

• Thinking text-capitalize makes all uppercase
• Confusing with text-lowercase
• Ignoring that only first letters change

4. You want to make text lowercase using Bootstrap but your code is:

<div class='text-lower'>Sample Text</div>

Why does the text not appear lowercase?

medium

A. Because Bootstrap requires JavaScript to change text case

B. Because 'text-lower' is not a valid Bootstrap class

C. Because you need to add inline CSS for lowercase

D. Because the div tag cannot have text-transform classes

Solution

1. Step 1: Check the class name correctness

   The correct Bootstrap class for lowercase is text-lowercase, not text-lower.

2. Step 2: Understand Bootstrap class usage

   Bootstrap text transform classes work on any element, including div, so the tag is not the issue.

3. Final Answer:

   Because 'text-lower' is not a valid Bootstrap class -> Option B

4. Quick Check:

   Correct class name needed = text-lowercase [OK]

Hint: Use exact class names like text-lowercase [OK]

Common Mistakes:

• Using incomplete or wrong class names
• Thinking tag type blocks styling
• Assuming JavaScript is needed for text transform

5. You want to style a heading so that only the first letter of the entire heading is uppercase and the rest lowercase using Bootstrap. Which approach is correct?

hard

A. Use text-capitalize class on the heading

B. Use text-uppercase class on the heading

C. Bootstrap does not have a class for this; use custom CSS and JavaScript

D. Use custom CSS with text-transform: capitalize; and JavaScript to lowercase the rest

Solution

1. Step 1: Understand Bootstrap text transform classes

   text-capitalize capitalizes the first letter of each word, not just the first letter of the entire text.

2. Step 2: Recognize the limitation

   Bootstrap does not provide a class to capitalize only the first letter of the entire text and lowercase the rest.

3. Step 3: Identify the solution

   This effect requires custom CSS and possibly JavaScript to lowercase all letters except the first.

4. Final Answer:

   Bootstrap does not have a class for this; use custom CSS and JavaScript -> Option C

5. Quick Check:

   Single first letter uppercase needs custom code [OK]

Hint: Bootstrap capitalizes words, not single first letter [OK]

Common Mistakes:

• Assuming text-capitalize affects only first letter of whole text
• Trying to use text-uppercase for partial capitalization
• Ignoring need for custom CSS/JS for this effect