Bootstrap 5 Text Transform
Last Updated :
04 Apr, 2024
Bootstrap 5 Text transform classes modify the appearance of text by altering its capitalization. These classes provide options like lowercase, uppercase, and capitalize, enabling consistent styling across various components and layouts.
Bootstrap 5 Text Transform Classes:
Class Name | Description |
---|
text-lowercase | Sets the text to lowercase. |
text-uppercase | Sets the text to uppercase. |
text-capitalize | Sets the text to capitalize each word. |
Syntax:
<tag class="text-*">...</tag>
Examples of Bootstrap 5 Text Transform
Example 1: In this example, we demonstrates the usage of Bootstrap 5’s text transform utility classes to modify the case of text content, showcasing both the default and lowercase transformations.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="m-2">
<h1 class="text-success">
Bootstrap 5 Text Transform
</h1>
<u>Text transform: not used</u>
<p>A COMPUTER SCIENCE PORTAL FOR GEEKS</p>
<!-- Bootstrap Font Size classes used -->
<u>Text transform: lowercase</u>
<p class="text-lowercase">
A COMPUTER SCIENCE PORTAL FOR GEEKS
</p>
</body>
</html>
Output:
Bootstrap 5 Text Transform Example Output
Example 2: In this example, we use Bootstrap 5’s text transform utility classes: text-lowercase, text-uppercase, and text-capitalize, demonstrating various case transformations applied to text content.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success">
Bootstrap 5 Text Transform
</h1>
<!-- Bootstrap Font Size classes used -->
<u>Text transform: lowercase</u>
<p class="text-lowercase">
A COMPUTER SCIENCE PORTAL FOR GEEKS</p>
<u>Text transform: uppercase</u>
<p class="text-uppercase">
a computer science portal for geeks</p>
<u>Text transform: capitalize</u>
<p class="text-capitalize">
a computer science portal for geeks</p>
</body>
</html>
Output:
Bootstrap 5 Text Transform Example Output
Share your thoughts in the comments
Please Login to comment...