Text transform utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text uppercase using Bootstrap utility classes.

Bootsrap

<p class="text-[1]">This text will be uppercase.</p>

Drag options to blanks, or click blank then click option'

Alowercase

Bnormal-case

Ccapitalize

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-lowercase instead of text-uppercase.

Forgetting to add the class to the element.

The text-uppercase class in Bootstrap transforms text to uppercase.

2fill in blank

medium

Complete the code to make the text lowercase using Bootstrap utility classes.

Bootsrap

<span class="text-[1]">THIS TEXT WILL BE LOWERCASE.</span>

Drag options to blanks, or click blank then click option'

Alowercase

Buppercase

Ccapitalize

Dnormal-case

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase instead of text-lowercase.

Not adding the class to the correct element.

The text-lowercase class in Bootstrap transforms text to lowercase.

3fill in blank

hard

Fix the error in the code to capitalize the first letter of each word using Bootstrap utility classes.

Bootsrap

<div class="text-[1]">this text will be capitalized.</div>

Drag options to blanks, or click blank then click option'

Alowercase

Buppercase

Ccapitalize

Dnormal-case

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase which makes all letters uppercase.

Using text-lowercase which makes all letters lowercase.

The text-capitalize class in Bootstrap capitalizes the first letter of each word.

4fill in blank

hard

Fill both blanks to create a paragraph with normal text case and bold font using Bootstrap utilities.

Bootsrap

<p class="text-[1] fw-[2]">This text is normal case and bold.</p>

Drag options to blanks, or click blank then click option'

Anormal-case

Buppercase

Cbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase instead of text-normal-case.

Using fw-normal instead of fw-bold.

Use text-normal-case for normal text and fw-bold for bold font weight in Bootstrap.

5fill in blank

hard

Fill all three blanks to create a span with capitalized text, italic style, and small font size using Bootstrap utilities.

Bootsrap

<span class="text-[1] fst-[2] fs-[3]">Styled text</span>

Drag options to blanks, or click blank then click option'

Acapitalize

Bitalic

Csmall

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase instead of text-capitalize.

Using fst-normal instead of fst-italic.

Using fs-lg instead of fs-sm.

Use text-capitalize for capitalized text, fst-italic for italic font style, and fs-sm for small font size in Bootstrap.

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