| Interactive Media Design

Bootstrap Text Utilities

Bootstrap's Text Utilitiesopen in new window are a group of utility classes used to control alignment, wrapping, weight, and many other text styles. A text utility can be used simply by adding a class or classes to the HTML element you wish to change.

Text Alignment

Bootstrap includes Text Alignment utility classesopen in new window. The alignment of text can be changed using the following classes: .text-start, .text-end, and .text-center.

In addition, responsive classes are available for aligning text to the left, right, or center. The responsive classes use the same viewport breakpoints as the grid system.

<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra-large) or wider.</p>

Warning: The following example uses the class *-right instead of *-end, which follows the older Bootstrap convention.

Text Transform

The Text Transformopen in new window utility classes are used to alter the capitalization of an element's text.

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

Font Styles

Bootstrap also includes classes that can be used to quickly change a font's weight and italicsopen in new window.

<p class="fw-bold">Bold text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fst-italic">Italic text.</p>

Warning: The following example uses the classes font-weight-* instead of fw-* and font-italic instead of fst-italic, which adhere to an older Bootstrap convention.

Text Modifiers

Bootstrap has other classes that can be handy to modify link styles. The class text-decoration-none is used to remove the underline default from links, and text-reset will set the color of the link to the parent's text color.

NOTE

While commonly used with anchor tags, the classes text-decoration-none and text-reset can be used with any text elements.