html

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

<div class="container">

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

</div>

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

<p class="h1">This is a paragraph.</p>

<p class="h2">This is a paragraph.</p>

<p class="h3">This is a paragraph.</p>

<p class="h4">This is a paragraph.</p>

<p class="h5">This is a paragraph.</p>

<p class="h6">This is a paragraph.</p>

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.

<h3 class="display-1">Heading 1</h3>

<h3 class="display-2">Heading 2</h3>

<h3 class="display-3">Heading 3</h3>

<h3 class="display-4">Heading 4</h3>

<h3 class="display-5">Heading 5</h3>

<h3 class="display-6">Heading 6</h3>

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

<h1>Hello <span class="small text-info">World!</span></h1>

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

<p>This code snippet shows how to <span class="mark">highlight</span>a text.</p>

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

<blockquote class="blockquote">

<p>Some saying...</p>

<footer class="blockquote-footer">From blah blah</footer>

</blockquote>

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

<p>This is a paragraph.</p>

<p class="lead">This is another paragraph.</p>

Output

The lead class is working properly.

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

Class Types Classes Description
Text Alignment .text-start, .text-center, .text-end To align text.
Device-based Text Alignment .text-sm/md/lg/xl-start/center/end To align text based on different device types.
Text Transformation .text-lowercase, .text-uppercase, .text-capitalize To transform the case of text.
Text Coloring .text-primary, .text-info, .text-success, .text-secondary, .text-warning, .text-danger, .text-muted To provide color to text.
Text Wrapping and Overflow .text-wrap, .text-nowrap, .text-break To wrap a text or break a long word.
Truncating Long Text .text-truncate To break a long text.

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.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.