html

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:

Prerequisite: Create an HTML File

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

<p>to get started, stop talking and start doing.</p>

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”:

<p class="text-capitalize">to get started, stop talking and start doing.</p>

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:

.text-capitalize::first-letter {

color: brown;

font-size: 60px;

font-weight: bold;

}

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.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.