Text

Text Alignment

Align text within its container using text-{side} classes. All alignment utilities include full responsive variants.

<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified</p>

Responsive variants. Prefix any alignment class with a breakpoint to apply it conditionally - e.g. text-left md:text-center is left-aligned on mobile and centered from tablet up.

Text Transform

Change the visual case of text without altering the underlying HTML.

<p class="uppercase">The quick brown fox</p>
<p class="lowercase">THE QUICK BROWN FOX</p>
<p class="capitalize">the quick brown fox</p>
<p class="no-case">reset transform</p>

Text Decoration

Add or remove decorative lines from text. Decoration classes can be combined with color and style modifiers.

<p class="underline">Underlined text</p>
<p class="overline">Overlined text</p>
<p class="strike">Strikethrough text</p>
<p class="d-none">No decoration</p>

<!-- Combine with color -->
<p class="underline underline-primary">Primary colored underline</p>

<!-- Combine with style -->
<p class="underline underline-wavy">Wavy underline</p>
<p class="underline underline-dashed">Dashed underline</p>

Decoration color & style modifiers

Combine decoration classes with color and style suffixes. Any theme color can be used as a suffix (e.g. underline-primary, strike-danger). Style suffixes: solid, double, dotted, dashed, wavy.

<!-- Color modifiers -->
<span class="underline underline-primary">Primary</span>
<span class="underline underline-success">Success</span>
<span class="underline underline-danger">Danger</span>

<!-- Style modifiers -->
<span class="underline underline-wavy">Wavy</span>
<span class="underline underline-dotted">Dotted</span>

Line Clamp

Truncate multi-line text to a fixed number of lines with an ellipsis. Uses -webkit-line-clamp under the hood, widely supported in all modern browsers.

<p class="line-clamp-1">Truncate to one line...</p>
<p class="line-clamp-2">Truncate to two lines...</p>
<p class="line-clamp-3">Truncate to three lines...</p>
<p class="line-clamp-4">Truncate to four lines...</p>
<p class="line-clamp-5">Truncate to five lines...</p>
<p class="line-clamp-6">Truncate to six lines...</p>

Text ellipsis

Truncate a single line with an ellipsis. Apply .text-ellipsis together with an overflow constraint so the overflowed text is actually clipped.

<!-- Truncate long single-line labels -->
<span class="text text-ellipsis" style="white-space:nowrap; overflow:hidden; max-width:16rem; display:inline-block;">
  This long label gets truncated with an ellipsis
</span>

Text Shadow

Add a soft shadow to text. .text-shadow uses the default color; .text-shadow-{color} tints the shadow with any theme color.

<!-- Default soft shadow -->
<p class="text-shadow">Soft shadow</p>

<!-- Colored shadow -->
<p class="text-primary text-shadow-primary">Primary glow</p>

<!-- Pseudo-state variant -->
<p class="hover:text-shadow">Shadow on hover</p>

Both classes also ship hover:, focus:, and active: rivals, e.g. hover:text-shadow.

Vertical Alignment

Control the vertical alignment of inline or table-cell elements.

<span class="align-top">Top</span>
<span class="align-middle">Middle</span>
<span class="align-bottom">Bottom</span>
<span class="align-baseline">Baseline</span>
<span class="align-auto">Auto</span>

Responsive text

Text alignment and transform utilities both support responsive breakpoint prefixes using the mobile-first approach. Prefix any class with a breakpoint followed by :.

<!-- Left on mobile, centered from md up -->
<p class="text-left md:text-center">Responsive alignment</p>

<!-- Normal on mobile, uppercase from lg up -->
<p class="no-case lg:uppercase">Responsive transform</p>

<!-- Line clamp responsive -->
<p class="line-clamp-3 md:line-clamp-5">
  More lines visible on wider screens...
</p>

Available breakpoints: xs: (375px), sm: (544px), md: (768px), lg: (992px), xl: (1200px), xxl: (1440px). See responsive docs for full details.