Bootstrap Text Transformation Classes

If you want to make CSS text-transform property like changes using Bootstrap, you have to use Bootstrap text transformation classes given below to do this.

Lowercase, uppercase, and capitalize are the three text transformations your can perform using Bootstrap. You just need to add them to the class of the element in which you want to make text transformation.

Class Name Description
.text-lowercase Specify this class name to the element to make all text lowercase.
.text-uppercase You can make all the text words capital using this class of bootstrap.
.text-capitalize Use this class to make camel-case text or make text capitalize.

Lowercase Bootstrap Text Transformation Using Class text-lowercase

If you want all your text of an HTML element to be in lowercase, you have to just use the Bootstrap class .text-lowercase. This automatically adds the CSS text-trasform 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 single class.

Test it Live

Output

This is the lowercase text using .text-lowercase class

Uppercase Bootstrap Text Using Class text-uppercase

You have to use the Bootstrap class .text-uppercase, if you want to make your text of an HTML element to be in uppercase. It will automatically add the CSS text-trasform property to the element and its value as “uppercase”.

This is the quickest way of making any text content lowercase using the bootstrap addition of single class.

Test it Live

Output

This is the uppercase text using .text-uppercase class

Capitalize Bootstrap Text Transformation Using Class text-capitalize

You have to use the Bootstrap class .text-capitalize, if you want to make your text of an HTML element to be capitalizing. It will automatically add the CSS text-trasform property to the element and its value as “capitalize”.

This is the quickest way of making any text content capitalize using the bootstrap addition of single class.

Test it Live

Output

This is the capitalize text using .text-capitalize class

Reference
Getbootstrap Reference

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ULTIMATE TOOLKIT Free eBook

Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id