Bootstrap 5 Typography Text utilities

Last Updated : 02 Feb, 2023

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>