Text transform

Utilities for controlling the transformation of text.

In this article

Class Properties
.lowercase text-transform: lowercase;
.uppercase text-transform: uppercase;
.capitalize text-transform: capitalize;
.normal-case text-transform: none;

Usage

Use the .lowercase utility to lowercase text.

<p class="lowercase ...">The quick brown fox jumped over the lazy dog.</p>

Use the .uppercase utility to uppercase text.

<p class="uppercase ...">The quick brown fox jumped over the lazy dog.</p>

Use the .capitalize utility to capitalize text.

<p class="capitalize ...">The quick brown fox jumped over the lazy dog.</p>

Use the .normal-case utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

Variants

By default, only responsive variants are generated for text transformation utilities.

Responsive

To control the appearance of an element at a specific breakpoint, add a {screen}: prefix to any existing text transformation utility.

For example, use .md:uppercase to apply the uppercase utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:uppercase, add "text-transform" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "text-transform",
);

Questions or feedback about this article? Let us know