Bootstrap 4 - Typography

Typography is another concept in Bootstrap that helps in styling and formatting text content. By default, Bootstrap 4 uses 1rem (16px) as the font size for the body and the line height remains 1.5. It keeps its default font family as a native font stack. In addition, <p> (paragraph) elements have margin-top set to 0 and margin-bottom set to 1rem (16px).

Table of Contents

Default Font Sizes in Bootstrap 4

In Bootstrap 4, the typography font size is based on a rem unit of measurement relative to the root HTML element. The following table describes the font size in pixels compared to the rem.

Selector Font Size in REM Font Size in Pixel Example
<h1>, .h1 2.5rem 40px Heading 1
<h2>, .h2 2rem 32px Heading 2
<h3>, .h3 1.75rem 28px Heading 3
<h4>, .h4 1.5rem 24px Heading 4
<h5>, .h5 1.25rem 20px Heading 5
<h6>, .h6 1rem 16px Heading 6
.display-1 6rem 90px Display 1
.display-2 5.5rem 82.5px Display 2
.display-3 4.5rem 67.5px Display 3
.display-4 3.5rem 52.5px Display 4
<p> 1rem 16px Paragraph text

In the "Rem" unit, changing the root font size will affect the size of all elements on the page defined using the "Rem" unit.

Where Bootstrap's Typography Can Be Applied?

Typography can be applied for creating customized:

  • Headings and Subheadings.
  • Text and Paragraph's font color, font face, and alignment.
  • Ordered and Unordered listings.
  • Forms.
  • Buttons.
  • Any other display texts.

Headings in Bootstrap 4

HTML has default heading tags, and Bootstrap applies styles to it. Headings are bolder and have an increased font size in Bootstrap 4 compared to default HTML headings.

Example:

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

The .h1 to .h6 classes are also available when it is necessary to match the font style of a heading, but you do not want to use the corresponding HTML element.

Example:

<h1 class="h2">Heading 1 text in the size of Heading 2</h1>

<!-- or  -->

<p class="h1">Some texts that need to be displayed in heading 1 size.</p>
<p class="h2">Some texts that need to be displayed in heading 2 size.</p>
<p class="h3">Some texts that need to be displayed in heading 3 size.</p>
<p class="h4">Some texts that need to be displayed in heading 4 size.</p>
<p class="h5">Some texts that need to be displayed in heading 5 size.</p>
<p class="h6">Some texts that need to be displayed in heading 6 size.</p>

Subheadings in Bootstrap 4

The inline subheading adds an additional heading, which acts as a subheading for the main <hN> heading (where 'N' is any number between 1 and 6). For this, you have to add the <small> tag as a nested tag within the head element to get the formatting of the subheading, which you can see in the example below:

Example:

<h1> Heading 1 <small>SubHeading 1</small> </h1>
<h2> Heading 2 <small>SubHeading 2</small> </h2>
<h3> Heading 3 <small>SubHeading 3</small> </h3>
<h4> Heading 4 <small>SubHeading 4</small> </h4>
<h5> Heading 5 <small>SubHeading 5</small> </h5>
<h6> Heading 6 <small>SubHeading 6</small> </h6>

Display Headings in Bootstrap 4

Display headings differ from traditional headings elements; you can use them when you need to display a significant, slightly more opinionated title. There are four types of display heading classes available in Bootstrap 4.

Example:

<span class="display-1">Display Heading 1</span >
<span class="display-2">Display Heading 2</span >
<span class="display-3">Display Heading 3</span >
<span class="display-4">Display Heading 4</span >

Output:

Display 1
Display 2
Display 3
Display 4

Lead in Bootstrap 4

Bootstrap 4 .lead class is used to add some emphasis to any paragraph content. It can be implemented something like this:

Example:

<p>This is a regular paragraph without using the lead class.</p>
<p class="lead">Example of Lead class with a paragraph showing its use to emphasize text.</p>

Output:

This is a regular paragraph without using the lead class.

Example of Lead class with a paragraph showing its use to emphasize text.

Text Colors in Bootstrap 4

There are some reference classes available in Bootstrap 4 that are used to display texts in different colors.

Class Name Description
.text-primary This class displays texts in blue color.
.text-secondary This class displays texts in gray color.
.text-success This class displays texts in green color.
.text-danger Red is primarily avoided in most designs because it shows danger or anger. But you can use it according to your design needs.
.text-warning This class displays texts in dark orange color.
.text-info This class displays text in light blue (another shade of blue).
.text-light This class displays text in light colors that are not white.
.text-dark This class displays text in dark colors that are not black.
.text-muted This class is for the information that is silent and represents obsolete data.
.text-white This class displays text in white.

Typography Classes in Bootstrap 4

Here is a list of some other typography classes in Bootstrap 4 which can be used in styling HTML elements.

Class Name Description
.font-weight-bold For creating bold text.
.font-weight-bolder For creating bolder text.
.font-italic For creating italic text.
.font-weight-light For creating lightweight text.
.font-weight-lighter For creating more lightweight text.
.font-weight-normal For creating normal text.
.small To make a small text 85% smaller than the parent size.
.text-break This class helps in preventing long text from breaking design and layout.
.text-decoration-none For removing the underline from any hyperlink.
.text-justify For creating justified text.
.text-monospace For creating mono-spaced text.
.text-nowrap For creating no wrap text.
.text-lowercase For creating lowercase text.
.text-reset For resetting the text color or a link.
.text-uppercase For creating uppercased text.
.text-capitalize For creating capitalized text.