Text alignment
Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
Start aligned text on viewports sized SM (small) or wider.
Start aligned text on viewports sized MD (medium) or wider.
Start aligned text on viewports sized LG (large) or wider.
Start aligned text on viewports sized XL (extra-large) or wider.
Code Example
<p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">End aligned text on all viewport sizes.</p> <p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
Text wrapping and overflow
Wrap text with a .text-wrap class.
Word break
Prevent long strings of text from breaking your components' layout by using .text-break
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Code Example
<-- text-wrap --> <div class="badge bg-primary text-wrap" style="width: 6rem;"> This text should wrap. </div> <-- text-nowwrap --> <div class="text-nowrap bg-light" style="width: 8rem;"> This text should overflow the parent. </div> <-- text-break --> <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Text transform
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
Code Example
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
Font size
Quickly set the fixed size of text.
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
Code Example
<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>
Font weight and italics
Quickly change the font-weight or font-style of text with these utilities.
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.
Text with normal font style
Code Example
<p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-normal">Normal 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="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p>
Line height
Change the line height with .lh-* utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
Code Example
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</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.
Code Example
<p class="text-muted"> Muted text with a <a href="#" class="text-reset">reset link</a>. </p>
Text decoration
Decorate text in components with text decoration classes.
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removedCode Example
<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> <a href="#" class="text-decoration-none">This link has its text decoration removed</a>