Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Quickly change the font-size of 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>Quickly change the weight (boldness) of text or italicize text.
<p class="font-normal">Text without font style.</p>
<p class="font-italic">Italic text.</p>
<p class="fw-thin">Thin weight text.</p>
<p class="fw-extra-light">Extra-light 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="fw-normal">Normal weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-semi-bold">Semi bold weight text.</p>
<p class="fw-bold">Bold weight text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-extra-bold">Extra-bold weight text.</p>
<p class="fw-black">Black weight text.</p>Change the line height with .lh-* utilities.
<p class="lh-tight"></p>
<p class="lh-snug"></p>
<p class="lh-relaxed"></p>
<p class="lh-loose"></p>Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Note that we don’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.
Transform text in components with text capitalization classes.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.
Decorate text in components with text decoration classes.
<a class="text-decoration-none" href="#">This link has its text decoration removed</a>
<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>Prevent long strings of text from breaking your components’ layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.
<p class="text-break"></p>Wrap text with a .text-wrap class.
<p class="text-wrap">This text should wrap.</p>Prevent text from wrapping with a .text-nowrap class.
<p class="text-nowrap">This text should overflow the parent.</p>