📪Text Transform

.text-lowercase

Transforms the text to lowercase.

CSS equivalent: text-transform: lowercase;

Example usage:

<span class="text-lowercase">This text is transformed to lowercase.</span>

.lowercase

Transforms the text to lowercase.

CSS equivalent: text-transform: lowercase;

Example usage:

<span class="lowercase">This text is transformed to lowercase.</span>

.text-uppercase

Transforms the text to uppercase.

CSS equivalent: text-transform: uppercase;

Example usage:

<span class="text-uppercase">This text is transformed to uppercase.</span>

.uppercase

Transforms the text to uppercase.

CSS equivalent: text-transform: uppercase;

Example usage:

<span class="uppercase">This text is transformed to uppercase.</span>

.text-capitalize

Transforms the text to capitalize the first letter of each word.

CSS equivalent: text-transform: capitalize;

Example usage:

<span class="text-capitalize">This text is transformed to capitalize.</span>

.capitalize

Transforms the text to capitalize the first letter of each word.

CSS equivalent: text-transform: capitalize;

Example usage:

<span class="capitalize">This text is transformed to capitalize.</span>

.text-none

Removes text transformation.

CSS equivalent: text-transform: none;

Example usage:

<span class="text-none">This text has no transformation.</span>

.sentence-case

Transforms the text to sentence case.

CSS equivalent:

.text-sentence-case {
  text-transform: lowercase;
}

.text-sentence-case:first-letter {
  text-transform: uppercase;
}

Example usage:

<span class="sentence-case">This text is transformed to sentence case.</span>

Last updated