Typography in Bootstrap 5: Text Styling and Formatting Classes

Bootstrap 5 provides a wide range of typography classes that allow you to easily style and format text in your web pages. These classes can be applied to various HTML elements such as headings, paragraphs, links, lists, and more. Here are some commonly used typography classes in Bootstrap 5

Text Styling Classes
- text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark: These classes set the color of the text to predefined Bootstrap color themes.
Text Alignment Classes
- text-start, text-center, text-end : These classes align the text to the start, center, or end of the container, respectively.
Font Size Classes:
- fs-1, fs-2, fs-3, fs-4, fs-5, fs-6 : These classes set the font size of the text to predefined values.
Font Weight Classes:
- fw-normal, fw-bold : These classes set the font weight of the text to normal or bold, respectively.
Font Style Classes:
- fst-italic: This class sets the text to italic style.
Text Color Classes
- text-[color]: These classes set the color of the text to a specific color. Replace [color] with the desired color, such as text-primary, text-secondary, text-danger, etc.
Text Transformation Classes
- text-lowercase, text-uppercase, text-capitalize: These classes transform the text to lowercase, uppercase, or capitalize the first letter of each word, respectively.
Text Overflow and Text Break Classes:
- text-overflow-ellipsis, text-overflow-clip, text-break: These classes control the behavior of text overflow and text breaking in case of long text or limited space
Word Wrap Classes:
- word-wrap-break-word: This class enables word wrapping in case of long words that exceed the container width.

These are just some of the typography classes available in Bootstrap 5. You can combine these classes with other Bootstrap classes to create visually appealing and well-formatted text in your web pages.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typography</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/base.css" />
    <style>
      html {
        font-size: 16px;
      }
    </style>
  </head>
  <body style="min-height: 2500px">
    <div class="container">
      <h1>Bootstrap Typography</h1>
      <!--Regular Heading Tags-->
      <h1>Heading -1</h1>
      <h2>Heading -2</h2>
      <h3>Heading -3</h3>
      <h4>Heading -4</h4>
      <h5>Heading -5</h5>
      <h6>Heading -6</h6>
      <!--Heading Classes-->
      <p class="h1">h1 Bootstrap Class Heading</p>
      <p class="h2">h2 Bootstrap Class Heading</p>
      <p class="h3">h3 Bootstrap Class Heading</p>
      <p class="h4">h4 Bootstrap Class Heading</p>
      <p class="h5">h5 Bootstrap Class Heading</p>
      <p class="h6">h6 Bootstrap Class Heading</p>
      <!--Customizing headings-->
      <h3>Tutor Joe's <small class="text-primary">Software Solution</small></h3>
      <!--Display heading Classes-->
      <h1 class="display-1">Display-1 size - 5.rem</h1>
      <h1 class="display-2">Display-2 size - 4.5 rem</h1>
      <h1 class="display-3">Display-3 size - 4rem</h1>
      <h1 class="display-4">Display-4 size - 3.5 rem</h1>
      <h1 class="display-5">Display-5 size - 3 rem</h1>
      <h1 class="display-6">Display-6 size - 2.5 rem</h1>
      <!--Inline text elements-->
      <p>Tutor <mark>Joes</mark> Software Solution</p>
      <p>Tutor <span class="mark">Joes</span> Software Solution</p>
      <!--Abbreviations -->
      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
      <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
      <!--Lead & Text Alignment  -->
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque vitae harum tempora odio dolores ipsum eos aspernatur, corporis unde. Ratione!</p>
      <p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque vitae harum tempora odio dolores ipsum eos aspernatur, corporis unde. Ratione!</p>
      <p class="lead text-center">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque vitae harum tempora odio dolores ipsum eos aspernatur, corporis unde. Ratione!</p>
      <p class="lead text-end">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque vitae harum tempora odio dolores ipsum eos aspernatur, corporis unde. Ratione!</p>
      <p class="lead text-sm-end text-md-center text-lg-start text-primary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque vitae harum tempora odio dolores ipsum eos aspernatur, corporis unde. Ratione!</p>
      <!--Lists -->
      <ul class="list-unstyled">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>
          List Item
          <ul>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
          </ul>
        </li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>

      <ul class="list-inline">
        <li class="list-inline-item">Menu</li>
        <li class="list-inline-item">Menu</li>
        <li class="list-inline-item">Menu</li>
        <li class="list-inline-item">Menu</li>
      </ul>
      <!--Text Decoration & Font Weight-->
      <p class="text-decoration-underline">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, pariatur?</p>

      <p class="text-decoration-line-through">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, pariatur?</p>

      <p>Lorem ipsum dolor, sit <a href="" class="text-decoration-none">Click me </a> amet consectetur adipisicing elit. Reiciendis, pariatur?</p>

      <p class="fw-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, repellendus?</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview

Typography in Bootstrap 5: Text Styling and Formatting Classes

Example

Bootstrap 5.3X Tutorial

components