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>