Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Quickly change the weight (boldness) of text or italicize text.
<p class="font-italic">Italic text.</p>
<p class="font-weight-thin">Thin weight text.</p>
<p class="font-weight-extra-light">Extra-light weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-medium">Medium weight text.</p>
<p class="font-weight-semi-bold">Semi bold weight text.</p>
<p class="font-weight-bold">Bold weight text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-extra-bold">Extra-bold weight text.</p>
<p class="font-weight-black">Black weight text.</p>Change the line height with .lh-* utilities.
<p class="lh-sm"></p>
<p class="lh-md"></p>
<p class="lh-lg"></p>
<p class="lh-xl"></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>