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.

Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Font weight & italics

Bold text.

Bolder weight text (relative to parent).

Semibold weight.

Medium weight.

Normal weight.

Light weight.

Italic text.

Text decoration & style

Underlined text.

Line-through text.

No decoration.

Text with 50% opacity.

Line height

lh-1 — compact line height.

lh-sm — small.

lh-base — base (default).

lh-lg — large.

Font family

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

Serif. Georgia, Times New Roman…

Monospace. SFMono, Menlo, Consolas…

Text wrapping

This is going to wrap, wrap, wrap, wrap, wrap, wrap, wrap, wrap.
This text should very much not wrap.

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