Text transform utilities in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class .text-uppercase do?

It transforms all the text inside the element to uppercase letters, making every letter capital.

beginner

How does .text-lowercase affect text in Bootstrap?

It changes all the text inside the element to lowercase letters, making every letter small.

beginner

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

It capitalizes the first letter of each word in the text inside the element.

intermediate

Can Bootstrap text transform utilities be combined with other utility classes?

Yes, you can combine text transform classes with color, spacing, and other utilities to style text easily.

beginner

Why use Bootstrap text transform utilities instead of writing custom CSS?

They save time by providing ready-to-use classes that work consistently across browsers and help keep code clean.

Which Bootstrap class makes all text uppercase?

A .text-bold

B .text-lowercase

C .text-capitalize

D .text-uppercase

The class .text-uppercase converts all letters to uppercase.

What does the class .text-capitalize do?

A Makes all text lowercase

B Makes all text uppercase

C Capitalizes the first letter of each word

D Makes text italic

It capitalizes the first letter of each word in the text.

If you want all letters to be small, which class should you use?

A .text-lowercase

B .text-uppercase

C .text-capitalize

D .text-muted

The class .text-lowercase converts all letters to lowercase.

Can you use text transform utilities with other Bootstrap classes?

A No, they must be used alone

B Yes, they can be combined with other utility classes

C Only with color classes

D Only with spacing classes

Text transform utilities can be combined with any other Bootstrap utility classes.

What is a benefit of using Bootstrap text transform utilities?

A They provide quick, consistent text styling without extra CSS

B They only work in Chrome

C They automatically translate text

D They require writing custom CSS

Bootstrap utilities provide quick and consistent styling without needing custom CSS.

Explain how Bootstrap text transform utilities help in styling text on a webpage.

Think about how these classes change the look of text and save time.

Describe a real-life example where you would use .text-uppercase and .text-capitalize classes.

Imagine styling a website header and user names.

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