Gotcha! Here’s a neat overview of Bootstrap 5 Typography — all the ways to style and structure text with Bootstrap’s classes and elements.

?? Bootstrap 5 Typography

Bootstrap 5 offers a rich set of typography utilities and components to control font, size, alignment, and more.

1. Headings

Bootstrap supports standard HTML headings:

<h1>h1 Bootstrap heading</h1><h2>h2 Bootstrap heading</h2><h3>h3 Bootstrap heading</h3><h4>h4 Bootstrap heading</h4><h5>h5 Bootstrap heading</h5><h6>h6 Bootstrap heading</h6>

You can also use display headings for larger, attention-grabbing text:

<h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><!-- up to display-6 -->

2. Lead Paragraph

For emphasizing introductory paragraphs:

<p class="lead">  This is a lead paragraph — larger font size and lighter weight.</p>

3. Inline Text Elements

Bootstrap styles several inline elements:

• Mark text:

  <mark>This text is highlighted.</mark>

• Deleted text:

  <del>This text is deleted.</del>

• Inserted text:

  <ins>This text is inserted.</ins>

• Underlined text:

  <u>This text is underlined.</u>

• Small text:

  <small>This is small text.</small>

• Bold and Italic:

  <strong>Bold text</strong><em>Italic text</em>

4. Text Alignment

Use utility classes to align text:

• .text-start — left align

• .text-center — center align

• .text-end — right align

• .text-justify — justified text

Example:

<p class="text-center">Centered paragraph</p>

5. Text Wrapping and Overflow

• .text-wrap — allow text to wrap

• .text-nowrap — prevent wrapping

• .text-truncate — truncate with ellipsis (needs container width)

Example:

<div class="text-truncate" style="max-width: 200px;">  This is a very long text that will be truncated with ellipsis.</div>

6. Text Transform

Change case with these classes:

• .text-lowercase — lowercase

• .text-uppercase — uppercase

• .text-capitalize — capitalize each word

Example:

<p class="text-uppercase">uppercase text</p>

7. Font Weight and Italic

• .fw-light — light font weight

• .fw-normal — normal font weight

• .fw-bold — bold font weight

• .fst-italic — italic text

• .fst-normal — normal font style

8. Text Color

Use contextual text color classes:

• .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body, .text-muted, .text-white

Example:

<p class="text-success">Success text</p>

Summary Table

If you want sample code for specific typography needs or custom styles, just ask!