Change the capitalization of text with our text transform utilities.
| Class | Styles |
|---|---|
| .text-lowercase | text-transform: lowercase; |
| .text-uppercase | text-transform: uppercase; |
| .text-capitalize | text-transform: capitalize; |
On this page
Text transform
Transform text in components with our text capitalization classes: text-lowercase, text-uppercase or text-capitalize.
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>Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.
Customizing
Sass variables
Text transform utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),