Text Utilities

Prev Next

Beyond color, Bootstrap 5 has a set of small utility classes for controlling exactly how text behaves: where it aligns, whether it wraps or gets cut off, how it's cased, how heavy or slanted it looks, and whether it's underlined or struck through. Like the color utilities, these are single-purpose classes you combine freely on any element.

1. Text Alignment: .text-start / .text-center / .text-end

Bootstrap 5 uses logical direction names — start and end — instead of left and right, so alignment classes read correctly in right-to-left languages too.

<p class="text-start">Aligned to the start (left in LTR)</p>
<p class="text-center">Centered text</p>
<p class="text-end">Aligned to the end (right in LTR)</p>

Note: there is no .text-left or .text-right in Bootstrap 5 — those Bootstrap 3/4 names were replaced everywhere by start/end.

2. Wrapping and Truncation: .text-wrap / .text-truncate

.text-nowrap keeps text on one line, .text-wrap forces wrapping back on for elements that default to white-space: nowrap, and .text-truncate clips overflowing text to a single line with an ellipsis — but only works on a block or inline-block element with a constrained width.

<div class="text-truncate" style="max-width: 200px;">
  This is a really long trail name that would otherwise overflow the card
</div>

3. Text Casing: .text-lowercase / .text-uppercase / .text-capitalize

<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">Uppercased Text</p>
<p class="text-capitalize">capitalized text</p>

Note: .text-capitalize only capitalizes the first letter of every word visually via CSS — it doesn't change the underlying text, so screen readers and copy/paste still see the original casing.

4. Weight and Style: .fw-bold / .fw-normal / .fst-italic

Font-weight utilities range from .fw-light to .fw-bolder, with .fw-bold and .fw-normal the two you'll use most. .fst-italic and .fst-normal control italics.

<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fst-italic">Italic text</p>

5. Text Decoration: .text-decoration-underline / .text-decoration-none

.text-decoration-underline adds an underline to any element, while .text-decoration-none is most often used to strip the default underline off an <a> tag.

<span class="text-decoration-underline">Underlined span</span>

<a href="#" class="text-decoration-none">Link without an underline</a>

6. Worked Example: TrailMap Trail-Card Title

Trail names on TrailMap vary wildly in length ("Loop" vs. "The Historic Ridgeline Overlook & Waterfall Loop Trail"), so every card title uses .text-truncate on a fixed-width heading, guaranteeing every card in a row stays the same height.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title text-truncate">
      The Historic Ridgeline Overlook & Waterfall Loop Trail
    </h5>
    <p class="card-text text-muted">4.6 mi · Moderate</p>
  </div>
</div>

Why it matters: .card-title is a block-level heading with no width limit of its own — without .text-truncate, a long trail name would wrap to two or three lines and push every card in that row out of alignment.

Next up: now that titles fit cleanly, head to Buttons to build the "View Trail" call-to-action that goes right under this title.

Prev Next