Text transform utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What text style will this Bootstrap class apply?

Given the following HTML snippet using Bootstrap, what will be the visual style of the text inside the <p> tag when rendered in a browser?

<p class="text-lowercase">HELLO WORLD</p>

Bootsrap

<p class="text-lowercase">HELLO WORLD</p>

A The text will appear as "hello world" in all lowercase letters.

B The text will appear as "HELLO WORLD" in all uppercase letters.

C The text will appear as "Hello World" with the first letter of each word capitalized.

D The text will appear unchanged as "HELLO WORLD".

💡 Hint

Think about what the class name suggests about letter casing.

The Bootstrap class text-lowercase converts all letters in the text to lowercase, so "HELLO WORLD" becomes "hello world" visually.

❓ selector

intermediate

Which Bootstrap class applies uppercase text transformation?

You want to make a heading's text appear in all uppercase letters using Bootstrap classes. Which class should you add to the element?

A text-uppercase

B text-capitalize

C text-lowercase

D text-bold

💡 Hint

Look for the class name that suggests making text uppercase.

The class text-uppercase transforms all letters to uppercase. text-capitalize capitalizes the first letter of each word, and text-lowercase makes all letters lowercase. text-bold is not a Bootstrap text transform class.

🧠 Conceptual

advanced

What is the effect of the text-capitalize class in Bootstrap?

Consider the following HTML:

<p class="text-capitalize">welcome to the world of bootstrap</p>

What will the text look like when rendered in a browser?

Bootsrap

<p class="text-capitalize">welcome to the world of bootstrap</p>

A "Welcome to the world of bootstrap" only the first letter of the first word capitalized.

B "WELCOME TO THE WORLD OF BOOTSTRAP" all uppercase letters.

C "welcome to the world of bootstrap" all lowercase letters.

D "Welcome To The World Of Bootstrap" with the first letter of each word capitalized.

💡 Hint

Think about what 'capitalize' means for each word.

The text-capitalize class capitalizes the first letter of each word, so every word starts with a capital letter.

❓ accessibility

advanced

How to ensure text transform utilities do not confuse screen readers?

When using Bootstrap text transform classes like text-uppercase or text-lowercase, what should you do to keep the text accessible for screen readers?

A Avoid using text transform classes altogether.

B Add <code>aria-label</code> with the original text in correct casing.

C Use <code>text-transform</code> CSS only on decorative text, not important content.

D No special action is needed; screen readers read transformed text correctly.

💡 Hint

Screen readers read the actual text content, not the visual style.

Screen readers read the underlying text, which may be all uppercase or lowercase due to CSS. Adding an aria-label with the original text ensures correct pronunciation and clarity.

❓ layout

expert

How does Bootstrap's text transform utility interact with responsive design?

You want text to be uppercase on small screens but lowercase on medium and larger screens using Bootstrap classes. Which combination of classes achieves this?

A Use <code>text-uppercase text-lg-lowercase</code>

B Use <code>text-lowercase text-md-uppercase</code>

C Use <code>text-uppercase text-md-lowercase</code>

D Use <code>text-lowercase text-sm-uppercase</code>

💡 Hint

Bootstrap uses breakpoint prefixes like md for medium screens.

The class text-uppercase applies uppercase text by default (all screen sizes). The class text-md-lowercase applies lowercase text starting at medium screens and up, overriding the default uppercase on those sizes.

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