Text Utilities

Prev Next

Beyond color, Bootstrap 4 has a small set of text utilities for alignment, truncation, letter case, and weight/style — the everyday tweaks you reach for on card titles, labels and one-line summaries.

1. Text Alignment: .text-left / .text-center / .text-right

Bootstrap 4 aligns text with three directional classes named after the physical side of the screen: .text-left, .text-center, .text-right. Responsive variants exist too, like .text-md-right.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-md-right">Right aligned on md and up.</p>

Left/right, not start/end. Bootstrap 4 names these classes after physical screen sides: text-left and text-right. Bootstrap 5 later switched to logical properties for RTL-language support and renamed them text-start and text-end — those names do not exist in Bootstrap 4.

2. Text Truncation: .text-truncate

.text-truncate clips overflowing text with an ellipsis on a single line. The element must be a block or inline-block with a constrained width for it to take effect.

<div class="text-truncate" style="max-width: 200px;">
  This text is way too long and will be truncated with an ellipsis.
</div>

3. Letter Case: .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>

4. Weight and Style: .font-weight-bold / .font-weight-normal / .font-italic

Bootstrap 4's font-weight and style utilities spell the whole word out: .font-weight-bold, .font-weight-normal, and .font-italic.

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

Bootstrap 4 spells these out, Bootstrap 5 abbreviates them. .font-weight-bold and .font-italic are the real Bootstrap 4 class names. Bootstrap 5 renamed them to the shorter .fw-bold and .fst-italic — those abbreviated names will not work in a Bootstrap 4 project.

5. Worked Example: TrailMap Trail-Card Title

Trail names can run long ("Ridgeline Loop via the Old Fire Road and Overlook Spur"), so TrailMap truncates the card title to one line and keeps the distance on its own line below, always visible.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title text-truncate font-weight-bold">
      Ridgeline Loop via the Old Fire Road and Overlook Spur
    </h5>
    <p class="card-text text-muted">4.8 mi · Hard</p>
  </div>
</div>

Next up: that trail card only used one button style — head to Buttons to see every button variant, size and state Bootstrap 4 offers.

Prev Next