Skip to content

Try our new Crash Courses!

Become a member using the button below to hide this banner and gain access to our new Crash Courses.

Text classes – Bootstrap

Demo

For the best viewing experience, click the Edit on CodePen button on the upper righthand corner of the Pen to open it in a new tab.

Summary

You can add classes to your elements that change the way your text looks. View the demo to see examples of all of the classes.

Details

Heading classes

In Bootstrap 4 and 5, you can use the h1, h2, h3, h4, h5, and h6 classes to make any element look like a heading.

Display

In Boostrap 4 and 5 you can use the display-1, display-2, display-3, and display-4 classes. In Bootstrap 5, you also have the display-5 and display-6 classes as well.

Lead

In Bootstrap 4 and 5 you can use the lead class to make a paragraph element stand out.

Alignment

In Bootstrap 4, you can use the text-left, text-center, and text-right classes to align text.

In v5, you can use the text-start, text-center, and text-end classes.

Text transform

In v4 and v5, you can use the text-lowercase, text-uppercase, text-capitalize classes to transform the text.

Font size

In v5, you can use the fs-1, fs-2, fs-3, fs-4, fs-5, and fs-6 classes to change the font size of an element. These classes only change the font size, whereas the heading classes above change the font-size, font-weight, and line-height properties.

Line height

In v5, you can use the lh-1, lh-sm, lh-base, and lh-lg classes to change the line height in an element.

Font weight and style

In v4, you can use the font-weight-bold, font-weight-bolder, font-weight-normal, font-weight-light, and font-weight-lighter classes to control the font weight. You can use the font-italic class to change the font style.

In v5, you can use the fw-bold, fw-bolder, fw-normal, fw-light, and fw-lighter to change the font-weight. You can use the fst-normal and fst-italic classes to change the font style.

Text decoration

In v4, you can use the text-decoration-none class to remove the underline from an element.

In v5, you can use the text-decoration-underline, text-decoration-line-through, and text-decoration-none classes to change the text decoration.

Exercises

Try recreating some of the HTML code from the Demo section in your index.html file. You don’t have to recreate all of the code.

Back to: Bootstrap Reference > Bootstrap Utility Classes