Text

Text alignment

Start aligned

Center aligned

End aligned

Start aligned on small (sm) viewport or wider.

Start aligned on medium (md) viewport or wider.

Start aligned on large (lg) viewport or wider.

Start aligned on extra large (xl) viewport or wider.

<p class="text-left">Start aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">End aligned</p>
<p class="text-sm-start">Start aligned on small (sm) viewport or wider.</p>
<p class="text-md-start">Start aligned on medium (md) viewport or wider.</p>
<p class="text-lg-start">Start aligned on large (lg) viewport or wider.</p>
<p class="text-xl-start">Start aligned on extra large (xl) viewport or wider.</p>

Text transform

This is a uppercased text.

This is a lowercased text.

This is a capitalized text.

<p class="text-uppercase">This is a uppercased text.</p>
<p class="text-lowercase">This is a lowercased text.</p>
<p class="text-capitalize">This is a capitalized text.</p>

Font weights and italics

font-style utilities are abbreviated as .fst-* and font-weight utilities are abbreviated as .fw-*.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style.

<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>

Quickly change the font-size of text. While our heading classes (e.g., .h1–.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. .fs-1 has the size of h1, etc.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<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>

Line height

Change the line height with .lh-* utilities. Available values are 1, sm, base and lg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati nesciunt enim in dolore quos impedit ad, officiis rerum, iure eum hic eveniet sed alias vel voluptas fugiat suscipit ab odit aspernatur? Ullam sint at natus dolor quasi blanditiis amet asperiores ea quisquam assumenda qui distinctio iusto eligendi, laboriosam corporis magnam quod eveniet porro, quae inventore cumque, eius illum deleniti? Sint, reiciendis ab! Magnam dicta distinctio velit asperiores, dolorum laborum, beatae numquam architecto amet esse quibusdam!

<p class="lh-1">...</p>
<p class="lh-sm">...</p>
<p class="lh-base">...</p>
<p class="lh-lg">...</p>

Wrapping and overflow

Wrap text with a .text-wrap class and prevent text from wrapping with a .text-nowrap class.

This text should wrap.

This text should overflow the parent.

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

<div class="text-no-wrap" style="width: 100px;">This text should overflow the parent.</div>

Word break

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

<p class="text-break">SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>

Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed.

<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>
<p><a href="#" class="text-decoration-none">This link has its text decoration removed.</a></p>

Reset color

The reset text gets the color of its parent.

Muted text with a normal link

Muted text with a reset link

<p class="text-muted">Muted text with a <a href="#">normal link</a></p>
<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a></p>