Typography in Bootstrap is a key component of its design system, providing a set of styles and utilities to ensure consistent and responsive text presentation. Bootstrap’s typography utilities cover everything from basic text styling to advanced text alignment and responsive text adjustments. Here’s a comprehensive look at typography in Bootstrap:

1. Basic Typography Classes

Bootstrap includes a variety of utility classes for basic text styling. These classes help you manage text color, size, weight, and more.

• Text Colors: Use .text-primary, .text-secondary, .text-success, .text-danger, etc., to set text colors based on Bootstrap’s color palette.

  <p class="text-primary">This is primary text color.</p>
  

• Font Weight: Use classes like .fw-light, .fw-normal, .fw-bold, etc., to control the font weight.

  <p class="fw-bold">This is bold text.</p>
  

• Font Style: Use .fst-italic to italicize text and .fst-normal to set normal font style.

  <p class="fst-italic">This text is italicized.</p>
  

• Text Alignment: Use .text-start, .text-center, .text-end to align text left, center, or right respectively.

  <p class="text-center">This text is centered.</p>
  

• Text Decoration: Use .text-decoration-none, .text-decoration-underline, .text-decoration-line-through to manage text decoration.

  <p class="text-decoration-underline">This text is underlined.</p>
  

2. Typography Utilities

Bootstrap provides several utilities for adjusting typography, which include:

• Font Sizes: Use classes like .fs-1, .fs-2, .fs-3, etc., to set font sizes, where .fs-1 is the largest and .fs-6 is the smallest.

  <p class="fs-3">This is a larger text.</p>
  

• Line Height: Use .lh-1, .lh-sm, .lh-base, .lh-lg to control line height.

  <p class="lh-lg">This text has a larger line height.</p>
  

• Text Transform: Use .text-uppercase, .text-lowercase, .text-capitalize to control text transformation.

  <p class="text-uppercase">This text is uppercase.</p>
  

3. Responsive Typography

Bootstrap supports responsive typography, allowing text sizes to adjust based on screen size. This ensures text remains legible and appropriately sized on various devices.

• Responsive Font Sizes: Use .fs-* classes combined with breakpoints to apply different font sizes at different screen sizes.

  <p class="fs-4 fs-md-3 fs-lg-2">Responsive font size</p>
  

4. Headings

Bootstrap provides predefined styles for headings from <h1> to <h6>. These are sized appropriately and have consistent margins and weights.

• Heading Classes: Bootstrap’s headings are responsive and adapt to different screen sizes.

  <h1 class="display-1">Heading 1</h1>
  <h2 class="display-2">Heading 2</h2>
  

5. Text Wrapping and Overflow

Bootstrap includes utilities to manage text wrapping and overflow, ensuring that text behaves correctly when constrained within containers.

• Text Wrapping: Use .text-wrap to force text to wrap and .text-nowrap to prevent text from wrapping.

  <p class="text-nowrap">This text will not wrap and will overflow.</p>
  

• Overflow: Use .text-truncate to add ellipsis (...) for overflowing text.

  <p class="text-truncate">This is a long text that will be truncated with an ellipsis when it overflows its container.</p>
  

6. Inline and Block Elements

Bootstrap allows you to control text display by adjusting inline and block elements:

• Inline Elements: Use .d-inline to display elements as inline.

• Block Elements: Use .d-block to display elements as block-level.

  <span class="d-inline">Inline text</span>
  <div class="d-block">Block text</div>
  

Summary

Bootstrap’s typography features provide a comprehensive set of tools for managing text presentation:

• Basic Styling: Control text color, weight, style, and decoration.
• Utilities: Adjust font size, line height, text alignment, and more.
• Responsive Design: Ensure text adapts to different screen sizes.
• Headings: Use predefined styles for consistent headings.
• Text Handling: Manage text wrapping, overflow, and display properties.