0
0
Bootsrapmarkup~5 mins

Text transform utilities in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Text transform utilities help you change how text looks by making it all uppercase, lowercase, or capitalized without changing the original text.

You want all headings to be uppercase for a bold look.
You need to make user input lowercase for consistency.
You want the first letter of each word capitalized in a title.
You want to quickly style text without writing custom CSS.
You want to fix text case issues in a form or label.
Syntax
Bootsrap
<element class="text-lowercase">Lowercase text</element>
<element class="text-uppercase">Uppercase text</element>
<element class="text-capitalize">Capitalized Text</element>
text-lowercase makes all letters lowercase.
text-uppercase makes all letters uppercase.
text-capitalize makes the first letter of each word uppercase.
Examples
This paragraph text will appear all lowercase in the browser.
Bootsrap
<p class="text-lowercase">THIS WILL BE LOWERCASE</p>
This paragraph text will appear all uppercase in the browser.
Bootsrap
<p class="text-uppercase">this will be uppercase</p>
This paragraph text will have the first letter of each word capitalized.
Bootsrap
<p class="text-capitalize">this will be capitalized</p>
Sample Program

This example shows three paragraphs styled with Bootstrap text transform utilities. Each paragraph changes the text case visually without changing the original text content.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Text Transform Utilities</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-4">
    <h2>Text Transform Utilities Example</h2>
    <p class="text-lowercase">THIS TEXT WILL BE LOWERCASE</p>
    <p class="text-uppercase">this text will be uppercase</p>
    <p class="text-capitalize">this text will be capitalized</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

These utilities only change how text looks; the actual text content stays the same.

They are useful for quick styling without writing extra CSS.

Make sure to include Bootstrap CSS for these classes to work.

Summary

Use text-lowercase, text-uppercase, and text-capitalize classes to change text case.

They help keep your design consistent and save time.

Remember, these classes only change appearance, not the actual text.