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.