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.