Bootstrap Text Utilities

You can use common text utilities to control alignment, wrapping, word break, transform, font size, weight, and more.

1. Text alignment

For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

For example,

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

Bootstrap doesn't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.

2. Text wrapping and overflow

You can wrap text with a .text-wrap class.For example,

<div class="badge bg-primary text-wrap" style="width: 6rem;">
 This text should wrap.
</div>

Prevent text from wrapping with a .text-nowrap class.

3. Word break

Prevent long strings of text from breaking layout by using .text-break class to set word-wrap: break-word and word-break: break-word.

4. Text transform

You can transform text with text capitalization classes. For example,

For example,

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

5. Font size

You can quickly change the font-size of text.

While the heading classes (.h1 to .h6) apply font-size, font-weight, and line-height, these utilities only apply font-size. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.

For example,

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

6. Font weight and italics

You can change the font-weight or font-style of text with these utilities. The font-style utilities are abbreviated as .fst-* and the font-weight utilities are abbreviated as .fw-*.

For example,

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

7. Line height

You can change the line height with .lh-* utilities.

<p class="lh-1">Some placeholder content</p>
<p class="lh-sm">Some placeholder content</p>
<p class="lh-base">Some placeholder content</p>
<p class="lh-lg">Some placeholder content</p>

8. Monospace

You can change a selection to monospace font stack with .font-monospace class. For example,

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

9. Text decoration

You can decorate text with text decoration classes. For example,

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

10. Reset Color

You can reset a text or link's color with .text-reset, so that it inherits the color from its parent. For example,

<p class="text-body-secondary">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>