Bootstrap Text Transformation Classes

Bootstrap text transformation classes are useful to transform or change text content to lowercase, uppercase, and capitalize.

List of Bootstrap Text Transformation Classes

There are three text transformations classes in Bootstrap as given below:-

Class Name Description Live Example
.text-lowercase Lowercase text content in Bootstrap Test it Live
.text-uppercase Uppercase text content in Bootstrap Test it Live
.text-capitalize Capitalize text content in Bootstrap Test it Live
Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

Lowercase Text Transformation in Bootstrap

To lowercase text content of an HTML element, you can use the Bootstrap class .text-lowercase. This automatically adds the CSS text-transform property to the element with its value as “lowercase”.

This is the easiest way of making any text content lowercase with just the addition of a single class.

Test it Live

Output

Lowercase text content using Bootstrap .text-lowercase class.

Uppercase Text Transformation in Bootstrap

To uppercase text content in HTML, use the Bootstrap class .text-uppercase. It will automatically add the CSS text-transform property to the element and its value as “uppercase”.

It is the quickest way of making any text content lowercase using the Bootstrap addition of a single class.

Test it Live

Output

Uppercase text using Bootstrap .text-uppercase class.

Capitalize in Bootstrap

If you want to make text capitalize, use the Bootstrap class .text-capitalize. It will automatically add the CSS text-transform property to the element and its value as “capitalize”.

Test it Live

Output

Capitalize text using Bootstrap .text-capitalize class.

DOWNLOAD Free Bootstrap CHEAT SHEET