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.