Bootstrap 5 Typography Text utilities

Last Updated : 05 Aug, 2024

Bootstrap 5 Typography supports both text utilities and color utilities. There are several text utilities like text alignment, text wrapping, overflow, word break, text-transform, etc. It also supports all the text color utilities. For text, the only color utility available is modifying the color of the text.

Bootstrap 5 Typography text utility classes: There are no specific classes for typography text, we can use text utilities and color utilities.

Syntax:

<p class="text-utility-class/color-utility-class">
   ...
</p>

Example 1: The code below demonstrates the usage of text utilities and color utilities.

HTML

<!doctype html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="m-4 text-success">GeeksforGeeks</h1>
    <h4 class="ms-4">
        Bootstrap 5 Typography Text utility
    </h4>
    <h3 class="text-end m-3 text-primary">
        This Heading is right aligned and has 
        <strong>primary</strong> color
    </h3>
    <div class="container mt-4">
        <div class="container bg-light" style="width:45%;">
          <p>This text stays inside the container. <br>
            The background is colored light
          <br>This paragraph has highest Line height</p>
        </div>
        <p class="text-capitalize text-secondary">
            This classes are of bootstrap, learn about it bt
            <a href="https://www.geeksforgeeks.org/bootstrap/" 
                class="text-reset">
                clicking here
            </a>
        </p>
        <p class="font-monospace text-decoration-underline">
            This text is in <strong>monospace</strong>
            and has an Underline
        </p>
    </div>  
</body>

</html>

Output:

Example 2: The code below demonstrates multiple text utilities and shows how we can use text and color utilities together and also use the responsive text alignment classes:

HTML

<!doctype html>
<html lang="en">

<head>
   <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks</h1>
    <h4 class="ms-4">
        Bootstrap 5 Typography Text utilities
    </h4>
    <h3 class="text-lg-center mt-5 text-success">
        This Heading gets center aligned when the 
        screen size exceeds <strong>lg.</strong>
    </h3>
    <div class="container mt-4">
        <div class="container bg-secondary 
            text-light" style="width:25%;">
            <p>This text stays inside the container. 
            <br>The text is colored light</p>
        </div>
        <p class="text-uppercase bg-light">
            This line is completely uppercased</p>
        <p class="fs-3 fw-bold fst-italic">
            Font size - <strong>fs-3, </strong><br>
            Bold and italic Text
        </p>
    </div>  
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/content/typography/#text-utilities

Bootstrap 5 Typography Abbreviations

priyanshuchatterjee01

Improve

Article Tags :

Bootstrap 5 Typography Text utilities

Similar Reads

Reboot Content

Typography Content

Images Content

Tables Content

Thank You!

What kind of Experience do you want to share?