| 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-left, .text-right, .text-center, and .text-justify.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

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-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>

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="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

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.