Bootstrap 4 Typography


Display Heading

Display headings in Bootstrap are used to stand out more than the usual headline (larger font size and lighter font-weight) and there are four categories to choose from: .display-1,.display-2, .display-3, .display-4

.display-1

.display-2

.display-3

.display-4

In the example above, we used the <h2> tag on all display headings.

Example Code

<h2 class="display-1">.display-1</h2>
<h2 class="display-2">.display-2</h2>
<h2 class="display-3">.display-3</h2>
<h2 class="display-4">.display-4</h2>

Font Classes

font-* classes in Bootstrap allow us to change the font-style of any text.The following example shows font-classes.

font-weight-normal

font-weight-bold

font-weight-bolder

font-weight-light

font-weight-lighter

font-weight-italic

Example Code

<h3 class="font-weight-normal">font-weight-normal</h3>
<h3 class="font-weight-bold">font-weight-bold</h3>
<h3 class="font-weight-bolder">font-weight-bolder</h3>
<h3 class="font-weight-light">font-weight-light</h3>
<h3 class="font-weight-lighter">font-weight-lighter</h3>
<h3 class="font-italic">font-weight-italic</h3>

Lead Class

Use the .lead class to make a paragraph "stand out":

This is a normal example text.

This is an example text using .lead class.

Example Code

<p class="lead">This is an example text using .lead class.</p>

Small Class

The .small class shows only 80% of the original font size of an element.

This is an original paragraph.

This paragraph are used .small class.

Example Code

<p class="small">This paragraph are used .small class.</p>

Text Decoration Classes

Decorate a text element with Bootstrap text decoration classes. The following examples show all types of text decoration classes:

Class Description Example
.text-break Prevents long text from breaking layout Try it
.text-center Indicates center-aligned text Try it
.text-decoration-none Remove the underline of a link Try it
.text-left Indicates left align of a text Try it
.text-right Indicates right align of a text Try it
.text-justify Indicates justify of a text Try it
.text-monospace Indicates monospaced of a text Try it
.text-nowrap Indicates no wrap of a text Try it
.text-reset Resets the of a text Try it
.text-lowercase Lowercase of a text Try it
.text-uppercase Uppercase of a text Try it
.text-capitalize Capitalize of a text Try it