Bootstrap provides a wide range of text utilities to style and manipulate text elements easily without the need to write custom CSS. These utilities help you control text alignment, transformation, weight, font size, color, and more. Below is a breakdown of the most commonly used text utilities in Bootstrap:

1. Text Alignment

You can align text horizontally or vertically using these utilities:

• Horizontal Alignment: Control text alignment with .text-start, .text-center, and .text-end to align text to the left, center, or right, respectively.

  <p class="text-start">Left aligned text.</p>
  <p class="text-center">Center aligned text.</p>
  <p class="text-end">Right aligned text.</p>
  

• Responsive Text Alignment: You can also specify alignment based on screen size using classes like .text-md-start, .text-lg-center, etc.

  <p class="text-lg-end">Right aligned on large screens.</p>
  

2. Text Transformation

Control the case of text using text transformation utilities:

• .text-lowercase: Transforms text to lowercase.

• .text-uppercase: Transforms text to uppercase.

• .text-capitalize: Capitalizes the first letter of each word.

  <p class="text-lowercase">this is all lowercase text.</p>
  <p class="text-uppercase">this is all uppercase text.</p>
  <p class="text-capitalize">this is capitalized text.</p>
  

3. Font Weight and Style

Bootstrap offers utilities to change the font weight and style:

• Font Weight: Use .fw-normal, .fw-bold, .fw-bolder, .fw-light, and .fw-lighter to control text weight.

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

• Font Style: Use .fst-italic to italicize text and .fst-normal to remove italics.

  <p class="fst-italic">This is italicized text.</p>
  <p class="fst-normal">This is normal text (not italic).</p>
  

4. Text Wrapping and Overflow

Handle long text with Bootstrap’s text wrapping and overflow utilities:

• Text Wrapping: Use .text-wrap to allow text to wrap within its container, and .text-nowrap to prevent wrapping.

  <p class="text-wrap">This text will wrap onto the next line if it is too long.</p>
  <p class="text-nowrap">This text will not wrap even if it is too long to fit the container.</p>
  

• Text Overflow: Control how overflowing text is displayed using .text-truncate to show ellipses (...) when text is too long.

  <p class="text-truncate" style="width: 150px;">
    This text is too long and will be truncated.
  </p>
  

5. Text Color

Bootstrap has a range of predefined text color classes:

• Standard Colors: .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body, .text-muted, .text-white, and .text-black-50 (50% black).

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

• Responsive Text Color: You can make text color responsive by combining color classes with screen size breakpoints (e.g., .text-md-danger).

  <p class="text-lg-warning">This text is warning-colored on large screens.</p>
  

6. Text Decoration

Control the underline or strike-through effects using text decoration utilities:

• Underline: Use .text-decoration-underline to underline text.

• No Underline: Use .text-decoration-none to remove underlines.

• Strike-through: Use .text-decoration-line-through for strike-through text.

  <p class="text-decoration-underline">This text is underlined.</p>
  <p class="text-decoration-line-through">This text is struck through.</p>
  <p class="text-decoration-none">This text has no underline.</p>
  

7. Font Size

Change font size using .fs-1 to .fs-6, where .fs-1 is the largest and .fs-6 is the smallest.

<p class="fs-1">This is large text (fs-1).</p>
<p class="fs-4">This is medium text (fs-4).</p>
<p class="fs-6">This is small text (fs-6).</p>

You can also apply responsive font sizes with classes like .fs-lg-2 or .fs-sm-3.

8. Line Height

Control line height using .lh-* classes:

• Available options: .lh-1, .lh-sm, .lh-base, .lh-lg.

  <p class="lh-1">This text has a very tight line height.</p>
  <p class="lh-lg">This text has a loose line height.</p>
  

9. Monospace Text

Use the .font-monospace utility to set text in a monospace (fixed-width) font.

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

10. Text Reset

Use the .text-reset class to reset text color back to the default body text color when using custom text colors.

<a href="#" class="text-danger text-reset">This is a link with reset color.</a>

Summary of Bootstrap Text Utilities:

• Alignment: Use .text-start, .text-center, .text-end for horizontal alignment.
• Transformation: Use .text-uppercase, .text-lowercase, .text-capitalize for text transformations.
• Weight & Style: Control font weight and italics using .fw-* and .fst-*.
• Overflow: Handle text overflow with .text-wrap, .text-nowrap, and .text-truncate.
• Color: Apply text color using .text-* (e.g., .text-primary, .text-success).
• Decoration: Control underlining and strike-through effects with .text-decoration-*.
• Font Size: Adjust font size with .fs-1 to .fs-6.
• Line Height: Use .lh-* classes to control line height.
• Monospace: Apply the monospace font with .font-monospace.