Typography Classes in Bootstrap 5 | Explained

Typography plays an important role when it comes to grabbing a users’ attention. In web design, typography refers to exquisitely styling your text so that it appears appealing to the human eye. What should be the font size, pairings, alignment, style, etc all comes under the term typography. Bootstrap 5 provides various classes that help you style your text in various ways. This report discusses these classes in detail.

Bootstrap 5 headings

You can create headings in Bootstrap 5 using the <h1> to <h6> tags just like you do in HTML. However, in Bootstrap 5 you will notice that headings have different font family than the ones created using only HTML. Moreover, the font size is responsive which means that it changes corresponding to the size of the browser window.

Example

This example demonstrates Bootstrap 5 headings.

HTML

We have simply created a div container and placed headings from <h1> to <h6> inside that container.

Output

Bootstrap 5 headings were created successfully.

Heading classes

Bootstrap 5 lets its users make other elements look like headings through the usage of the .h1 to .h6 classes.

Example

Suppose you want to display a paragraph as a heading then follow the code snippet below.

HTML

Here each of the <p> elements has been given a different heading class.

Output

Paragraphs were styled using heading classes.

Display Classes

If you want to make your headings larger with a lighter font weight then you can assign your headings classes .display-1 through .display-6.

Example

Here is how these display classes work.

In the above code, each <h3> element has been assigned a different display class to demonstrate the concept of these classes properly.

Output

Display classes are working properly.

Small Class

For the purpose of making a certain part of a text smaller, the .small class or the <small> element is used.

Example

Suppose you want a certain piece of text in your heading smaller, then follow the demonstration below.

HTML

Here a heading was created and a part of the heading was reduced in size using the small class. Another thing that you will notice is that we used the class .text-info to provide a certain color to the text. You can use text color classes in the same manner to style your elements.

Output

A part of the heading was successfully made smaller.

Mark Class

We often want to highlight certain text to make it stand out or maybe to draw the readers’ attention. In Bootstrap 5 you can do so by using the .mark class or the <mark> element.

Example

Let’s highlight a text.

HTML

Here the <mark> element was used to highlight a piece of the paragraph generated in the above code.

Output

The text was highlighted.

Blockquote Class

For the purpose of quoting text from other sources, make use of the .blockquote class in the <blockquote> element.

Example

Suppose you want to quote a saying from some other source.

HTML

In the above code, to quote a saying we have used the <blockquote> element and written the saying in a <p> element. Afterward, to name the source of the saying, we are using the .blockquote-footer class in the <footer> tag.

Output

A saying was successfully quoted.

Lead Class

In order to make your paragraphs stand out use the .lead class in the <p> element.

Example

In the example below we are comparing a normal paragraph with a paragraph with a lead class to show the difference between the two.

HTML

Output

The lead class is working properly.

Some other class types along with their associated classes have been listed in the table below.

Conclusion

Typography classes in Bootstrap 5 allow its users to style text appearing on a website with great ease. These classes prevent its users from making extensive stylesheets thereby, reducing the number of code lines and saving a lot of time and effort. Classes associated with typography in Bootstrap 5 have been demonstrated in this article along with relevant examples.