Bootstrap Text Capitalize With Code Examples

Bootstrap offers hundreds of CSS classes to easily style HTML elements. These classes are predesigned with the CSS properties. All you have to do is add the specific Bootstrap class to the HTML elements. More specifically, Bootstrap also provides styling classes to set the text’s alignment and cases. The text-transform Bootstrap classes are used to adjust the text cases where “*” denotes the “lowercase”, “uppercase”, and “capitalize”.

This article will guide:

• How to Capitalize Each Word’s First Character in Bootstrap?
• How to Design the First Letter of the Text in Bootstrap?

Prerequisite: Create an HTML File

In HTML, add the “<p>” element to specify some content:

The above added “<p>” element’s text will look like this:

How to Capitalize Each Word’s First Character in Bootstrap?

The “text-capitalize” class is utilized to capitalize each word’s first letter. This Bootstrap class has a predefined CSS “text-transform” property with the value “capitalize”:

It can be observed that the first character of each word has been capitalized:

How to Design the First Letter of the Text in Bootstrap?

The CSS “::first-letter” pseudo-class is utilized to select the text’s first letter:

The following CSS properties are specified with the first letter of the “<p>” element:

• “color” adjusts the font color.
• “font-size” determines the font’s size.
• “font-weight” specifies the font’s thickness.

Output

That was all about capitalizing the Bootstrap text capitalization with code examples.

Conclusion

Bootstrap “text-capitalize” class is utilized to capitalize each word’s first letter. To capitalize the first character of each word of the element, first, add some text by using the elements, such as “<p>”, “<h1>”, or more. Then, specify the “text-capitalize” class to that particular element. This write-up has explained the Bootstrap text-capitalize class with code examples.