Text Alignment
Easily realign text to components with text alignment classes.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right 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>Text Wrapping and Overflow
Wrap text with a .text-wrap class.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Prevent text from wrapping with a .text-nowrap class.
Text Transform
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Font Weight and Italics
Quickly change the weight (boldness) of text or italicize text.
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.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal 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-italic">Italic text.</p>Monospace
Change a selection to our monospace font stack with .text-monospace.
This is in monospace
<p class="text-monospace">This is in monospace</p>Reset Color
Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.
Muted text with a reset link.
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Text Decoration
Remove a text decoration with a .text-decoration-none class.
<a href="#" class="text-decoration-none">Non-underlined link</a>