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 |
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.
|
1 |
<p class="text-lowercase">Lowercase Text Content Using Bootstrap <code>.text-lowercase</code> Class.</p> |
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.
|
1 |
<p class="text-uppercase">uppercase text using Bootstrap <code>.text-uppercase</code> class.</p> |
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”.
|
1 |
<p class="text-capitalize">capitalize text using Bootstrap <code>.text-capitalize</code> class.</p> |
Output
Capitalize text using Bootstrap .text-capitalize class.