Skip to main content

Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Text alignment

Easily realign text to components with text alignment classes. Alignment is responsive: .text-sm-start, .text-md-center, .text-lg-end, etc.

Justified to the start (left).

Centered.

Justified to the end (right).

Justified to both sides.

<p class="text-start">Justified to the start (left).</p>
<p class="text-center">Centered.</p>
<p class="text-end">Justified to the end (right).</p>
<p class="text-justify">Justified to both sides.</p>

Text transform

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 & italics

Bold text.

Bolder weight text (relative to parent).

Semibold weight.

Medium weight.

Normal weight.

Light weight.

Italic text.

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to parent).</p>
<p class="fw-semibold">Semibold weight.</p>
<p class="fw-medium">Medium weight.</p>
<p class="fw-normal">Normal weight.</p>
<p class="fw-light">Light weight.</p>
<p class="fst-italic">Italic text.</p>

Text decoration & style

Underlined text.

Line-through text.

No decoration.

Text with 50% opacity.

<p class="text-decoration-underline">Underlined text.</p>
<p class="text-decoration-line-through">Line-through text.</p>
<p class="text-decoration-none">No decoration.</p>
<p class="text-opacity-50">Text with 50% opacity.</p>

Line height

lh-1 — compact line height.

lh-sm — small.

lh-base — base (default).

lh-lg — large.

<p class="lh-1">lh-1 — compact line height.</p>
<p class="lh-sm">lh-sm — small.</p>
<p class="lh-base">lh-base — base (default).</p>
<p class="lh-lg">lh-lg — large.</p>

Font family

Sans-serif. system-ui, Segoe UI, Roboto…

Serif. Georgia, Times New Roman…

Monospace. SFMono, Menlo, Consolas…

<p class="font-sans-serif">Sans-serif. <code>system-ui</code>, Segoe UI, Roboto…</p>
<p class="font-serif">Serif. Georgia, Times New Roman…</p>
<p class="font-monospace">Monospace. SFMono, Menlo, Consolas…</p>

Text wrapping

This is going to wrap, wrap, wrap, wrap, wrap, wrap, wrap, wrap.
This text should very much not wrap. 
<span class="text-wrap d-inline-block demo-text-wrap-box">This is going to wrap, wrap, wrap, wrap, wrap, wrap, wrap,
  wrap.</span>
<hr class="my-2">
<span class="text-nowrap d-inline-block demo-text-wrap-box">This text should very much not wrap.</span>

Modern text features

boodoo leans into the newest text capabilities with graceful fallbacks:

  • .text-balance — balances headline wrapping using text-wrap: balance.
  • .text-pretty — pretty-wraps paragraphs with text-wrap: pretty.
  • .text-truncate — ellipsis for single-line overflow.
  • .text-hyphenate — enable hyphenation.
<h2 class="text-balance">A beautifully balanced two-line headline</h2>

Word break

LongWordThatShouldBreakAtTheEndOfTheContainerBecauseItIsTooLongToFitInOneLine@@@@@.com

<p class="text-break">LongWordThatShouldBreakAtTheEndOfTheContainerBecauseItIsTooLongToFitInOneLine@@@@@.com</p>