Bootstrap 4 Typography

This tutorial explains all about Bootstrap 4 Typography including colors, fonts, headings, text alignment, background color, etc.:

In this tutorial, we have covered headings, display headings, lead, inline text elements, text alignment, text wrapping, text truncate, word break, text-transform, font-weight, italics, monospace, reset color, text-decoration, colors, abbreviations, blockquotes, responsive font sizes, code, text selection, etc. of Typography.

We have also included a list of the most frequently asked questions of Typography.

=> Read Through The Easy Bootstrap Training Series

Please note that we have used Bootstrap version 4 in all examples.

Note: Use the following code skeleton to run the below example codes.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<!-- add code here -->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Headings

Bootstrap adds styles to all HTML headings (from <h1> to <h6>) by adding bigger Bootstrap font sizes and bolder font-weight.

Example of Headings:

You can try this example by running the below code snippet.

Example code of headings:

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

Browser output of Headings:

The below table shows a comparison between HTML headings with and without Bootstrap.

Did you see the differences?

Display Headings

Bootstrap makes display headings stand out more than normal headings by adding larger Bootstrap font sizes and lighter font-weight to the headings.

It provides the following four classes for display headings:

display-1: class: This class is used for display 1 headings.
.display-2 class: This class is used for display 2 headings.
.display-3 class: This class is used for display 3 headings.
.display-4 class: This class is used for display 4 headings.

Example of Display Headings:

You can try this example by running the below code snippet.

Example code of Display Headings:

<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>

Browser output of Display Headings:

You can compare your output of the Bootstrap headings and Display headings examples and see the differences.

Lead

Bootstrap uses the .lead class to make paragraphs stand out.

Example of Lead:

You can try this example by running the below code snippet.

Example code of Lead:

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel enim iaculis,
 pretium augue non, consectetur tellus. Aenean efficitur enim interdum elit aliquet rhoncus. Ut ut nisl
 sit amet leo.</p>

Browser output of lead:

Inline Text Elements

Bootstrap allows you to add styles to common inline HTML 5 elements.

It uses the following tags for inline text elements:

 tag: This tag is used to indicate highlighted text.
<del></del> tag: This tag is used to indicate deleted text.
<s></s> tag: This tag is used to indicate the text that is no longer accurate.
<ins></ins> tag: This tag is used to indicate text that is treated as an addition to the document.
 tag: This tag is used to indicate underlined text.
 tag: This tag is used to indicate text that is treated as fine print text.
 tag: This tag is used to indicate bold text.
 tag: This tag is used to indicate italicized text.

Example of Inline Text Elements:

You can try this example by running the below code snippet.

Example code of Inline Text Elements:

<p><mark>This is highlighted text.</mark></p>

<p><del>This text is treated as deleted text.</del></p>

<p><s>This text is treated as no longer accurate.</s></p>

<p><ins>This text is treated as an addition to the document.</ins></p>

<p><u>This is underlined text.</u></p>

<p><small>This text is treated as fine print text.</small></p>

<p><strong>This is bold text.</strong></p>

<p><em>This is italicized text.</em></p>

Browser output of Inline Text Elements:

Text Alignment

Bootstrap provides the following four classes for Bootstrap center text, left text, right text, and justify text.

.text-left class: This class is used to convert the text into Bootstrap align left text.
.text-center class: This class is used to convert the text into Bootstrap align center text.
.text-right class: This class is used to convert the text into Bootstrap align right text.
.text-justify class: This class is used to convert the text into Bootstrap align justify text.

Example of Text Alignments:

You can try this example by running the below code snippet.

Example code of Text Alignments:

<p class="text-left">This is left aligned text.</p>

<p class="text-center">This is center aligned text.</p>

<p class="text-right">This is right aligned text.</p>

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel enim
 iaculis, pretium augue non, consectetur tellus. Aenean efficitur enim interdum elit aliquet rhoncus. Ut
 ut nisl sit amet leo.</p>

Browser Output of Text Alignments:

Further you can use the .text-sm-*, .text-md-*, .text-lg-* and .text-xl-* classes to aligned text on viewports sized SM (small) or wider, viewports sized MD (medium) or wider, viewports sized LG (large) or wider and viewports sized XL (extra-large) or wider respectively.

Text Wrapping

Bootstrap uses the class .text-wrap to wrap the text and the class .text-nowrap class to overflow the parent.

Example of Text Wrapping:

You can try this example by running the below code snippet.

Example code of Text Wrapping:

<div class="text-wrap bg-info"style="width: 6rem;">This text should wrap.</div><br>
<div class="text-nowrap bg-info" style="width: 6rem;">This text should overflow the parent.</div>

Browser output of Text Wrapping:

Text Truncate

Bootstrap uses the .text-truncate class to truncate the text with an ellipsis.

Example of Text Truncate:

You can try this example by running the below code snippet.

Example code of Text Truncate:

<div class="row">
<div class="col-2 text-truncate">This is an example for text truncate.</div>
</div>

Browser output of Text Truncate:

Word Break

Bootstrap uses the .text-break class to avoid the breakage of the layout of the component due to long strings of text.

Example of Word Break:

You can try this example by running the below code snippet.

Example code of Word Break:

<p class="text-break">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

Browser output of Word Break:

Text Transform

Bootstrap provides the following three classes for text transformation.

.text-uppercase class: This class is used to convert the text into upper cased text.
.text-lowercase class: This class is used to convert the text into lowercased text.
.text-capitalize class: This class is used to convert the text into capitalized text (capitalize the first letter of each word).

Example of Text Transform:

You can try this example by running the below code snippet.

Example code of Text Transform:

<p class="text-uppercase">this is uppercased text.</p>

<p class="text-lowercase">this is lowercased text.</p>

<p class="text-capitalize">this is capitalized text.</p>

Browser output of Text Transform:

Font Weight

Bootstrap uses the following classes to change the font-weight.

It provides the following classes for Bootstrap font-weight:

.font-weight-bold class: This class is used to convert the text into bold text.
.font-weight-bolder class: This class is used to convert the text into bolder weight text.
.font-weight-normal class: This class is used to convert the text into normal weight text.
.font-weight-light class: This class is used to convert the text into lightweight text.
.font-weight-lighter class: This class is used to convert the text into lighter weight (relative to the parent element) text.

Example of Font Weight:

You can try this example by running the below code snippet.

Example code of Font Weight:

<p class="font-weight-bold">This is bold text.</p>

<p class="font-weight-bolder">This is bolder weight text (relative to the parent element).</p>

<p class="font-weight-normal">This is normal weight text.</p>

<p class="font-weight-light">This is light weight text.</p>

<p class="font-weight-lighter">This is lighter weight text (relative to the parent element).</p>

Browser output of Font Weight:

Italics

Bootstrap uses the .font-italic class to convert the text into italics text.

Example of Italics:

You can try this example by running the below code snippet.

Example code of Italics:

<p class="font-italic">This is italic text.</p>

Browser output of Italics:

Monospace

Bootstrap uses the .text-monospace class to convert the text into a monospace font.

Example of Monospace:

You can try this example by running the below code snippet.

Example code of Monospace:

<p class="text-monospace">This text is in monospace</p>

Browser output of Monospace:

Reset Color

Bootstrap uses the .text-muted class to reset the color.

Example of Reset color:

You can try this example by running the below code snippet.

Example code of Reset Color:

<p class="text-muted">
This is muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Browser output of Reset Color:

Text Decoration

Bootstrap uses the .text-decoration-none class to remove the text decoration.

Example of Text Decoration:

You can try this example by running the below code snippet.

Example code of Text decoration:

<a href="#" class="text-decoration-none">This is a non-underlined link</a>

Browser output of Text Decoration:

Bootstrap Colors

Text Colors

Bootstrap utility classes help to add colors to the text. It provides the following classes for text colors.

.text-primary class: This class is used to indicate the primary text color.
.text-secondary class: This class is used to indicate the secondary text color.
.text-success class: This class is used to indicate the success text color.
.text-danger class: This class is used to indicate the danger text color.
.text-warning class: This class is used to indicate the warning text color.
.text-info class: This class is used to indicate the info text color.
.text-light class: This class is used to indicate the light text color.
.text-dark class: This class is used to indicate the dark text color.
.text-body class: This class is used to indicate the body text color.
.text-muted class: This class is used to indicate the muted text color.
.text-white class: This class is used to indicate the white text color.
.text-black class: This class is used to indicate the black text color.

Example of Text Colors:

You can try this example by running the below code snippet.

Example code of Text Colors:

<p class="text-primary">This is primary color text (.text-primary class)</p>

<p class="text-secondary">This is secondary color text (.text-secondary class)</p>

<p class="text-success">This is success color text (.text-success class)</p>

<p class="text-danger">This is danger color text (.text-danger class)</p>

<p class="text-warning">This is warning color text (.text-warning class)</p>

<p class="text-info">This is info color text (.text-info class)</p>

<p class="text-light bg-dark">This is light color text (.text-light class)</p>

<p class="text-dark">This is dark color text (.text-dark class)</p>

<p class="text-body">This is body color text (.text-body class)</p>

<p class="text-muted">This is muted color text (.text-muted class)</p>

<p class="text-white bg-dark">This is white color text (text-white class)</p>

<p class="text-black">This is black color text (.text-black class)</p>

Browser output of Text Colors:

Background Colors

Bootstrap utility classes help to add colors to the background.

It provides the following classes for background colors.

.bg-primary class: This class is used to indicate the primary background color.
.bg-secondary class: This class is used to indicate the secondary background color.
.bg-success class: This class is used to indicate the success background color.
.bg-danger class: This class is used to indicate the danger background color.
.bg-warning class: This class is used to indicate the warning background color.
.bg-info class: This class is used to indicate the info background color.
.bg-light class: This class is used to indicate the light background color.
.bg-dark class: This class is used to indicate a dark background color.
.bg-white class: This class is used to indicate the white background color.
.bg-transparent class: This class is used to indicate a transparent background color.

Example of Background Colors:

You can try this example by running the below code snippet.

Example code of Background Colors:

<div class="p-3 mb-2 bg-primary text-white">This is primary background color (.bg-primary class)</div>
<div class="p-3 mb-2 bg-secondary text-white">This is secondary background color (.bg-secondary class)</div>
<div class="p-3 mb-2 bg-success text-white">This is success background color (.bg-success class)</div>
<div class="p-3 mb-2 bg-danger text-white">This is danger background color (.bg-danger class)</div>
<div class="p-3 mb-2 bg-warning text-dark">This is warning background color (.bg-warning class)</div>
<div class="p-3 mb-2 bg-info text-white">This is info background color (.bg-info class)</div>
<div class="p-3 mb-2 bg-light text-dark">This is light background color (.bg-light class)</div>
<div class="p-3 mb-2 bg-dark text-white">This is dark background color (.bg-dark class)</div>
<div class="p-3 mb-2 bg-white text-dark">This is white background color (.bg-white class)</div>
<div class="p-3 mb-2 bg-transparent text-dark">This is transparent background color (.bg-transparent class)</div>

Browser output of Background Colors:

Background Gradient

Bootstrap utility classes provide a way to add different color gradients to the background. You need to set the $enable-gradients variable to true (default is false) to enable background gradients.

The following list shows the available classes for Background Gradients.

.bg-gradient-primary class: This class is used to indicate the primary background gradient.
.bg-gradient-secondary class: This class is used to indicate the secondary background gradient.
.bg-gradient-success class: This class is used to indicate the success background gradient.
.bg-gradient-danger class: This class is used to indicate the danger background gradient.
.bg-gradient-warning class: This class is used to indicate the warning background gradient.
.bg-gradient-info class: This class is used to indicate the info background gradient.
.bg-gradient-light class: This class is used to indicate the light background gradient.
.bg-gradient-dark class: This class is used to indicate the dark background gradient.

Abbreviations

Bootstrap allows you to style <abbr> element. The expanded version will be shown on hover.

Example of Abbreviations:

You can try this example by running the below code snippet.

Example code of Abbreviations:

<p><abbr title="Cascading Style Sheets">CSS</abbr></p>

Browser output of Abbreviations:

Blockquotes

You can add the .blockquote class into a <blockquote> tag when the quoting content blocks from other resources.

Example of Blockquotes:

You can try this example by running the below code snippet.

Example code of Blockquotes:

<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>

Browser output of Blockquotes:

Responsive Font Sizes

Bootstrap version 4.3.0 provides a facility to enable responsive font sizes. Set the $enable-responsive-font-sizes Sass variable to true and recompile Bootstrap to enable responsive font sizes.

You may visit this link to get more details about Bootstrap responsive font sizes.

Code

Inline code

Bootstrap uses the <code> tag to wrap inline code segments.

Note: Angle brackets should not be used.

Example of Inline Code:

You can try this example by running the below code snippet.

Example code of Inline Code:

This <code>&lt;section&gt;</code> should wrap as inline.

Browser output of Inline Code:

Code Blocks

Bootstrap uses the <pre> tags for multiple code lines. You may use the .pre-scrollable class to set max-height: 340px and insert a scrollbar (Y-axis).

Note: Angle brackets should not be used.

Example of Code Blocks:

You can try this example by running the below code snippet.

Example code of Code Blocks:

<pre><code>&lt;p&gt;This is sample text.&lt;/p&gt;
&lt;p&gt;This is another line of sample text.&lt;/p&gt;
</code></pre>

Browser output of Code Blocks:

Variables

Bootstrap uses the <var> tag to indicate variables.

Example of Variables:

You can try this example by running the below code snippet.

Example code of Variables:

<var>y</var> = <var>m</var><var>x</var> + <var>c</var>

Browser output of Variables:

User Input

Bootstrap uses the <kbd> tag to indicate keyboard input entered by the user.

Example of User Input:

You can try this example by running the below code snippet.

Example code of User Input:

Type <kbd>cd</kbd> followed by the directory name to switch directories.<br>
Press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> to edit settings

Browser output of User Input:

Sample Output

Bootstrap uses the <samp> tag to indicate a sample output that belongs to a computer program.

Example of Sample Output:

You can try this example by running the below code snippet.

Example code of Sample Output:

<samp>This text is a sample output.</samp>

Browser output of Sample Output:

Text Selection

Bootstrap text selection changes the way in which the content is selected when a user interacts with the content.

It provides the following three classes for text selection.

.user-select-all: This class is used to fully select the text when clicked by the user.
.user-select-auto: This class is used to indicate the default select behaviour.
.user-select-none: This class is used to disable the text selection when clicked by the user.

Example of Text Selection:

You can try this example by running the below code snippet.

Example code of Text Selection:

<p class="user-select-all">This text will be fully selected when clicked by the user.</p>
<p class="user-select-auto">This is the default select behavior.</p>
<p class="user-select-none">This text will not be selectable when clicked by the user.</p>

Browser output of Text Selection:

Frequently Asked Questions

In this section, we will look at some of the frequently asked questions of Bootstrap typography.

Q #1) Does Bootstrap add styles to the HTML 5 headings.

Answer: Yes, it adds styles to all the HTML 5 headings.

Q #2) What is the difference between Bootstrap headings and Display headings?

Answer: The Bootstrap display headings stand out more than the normal Bootstrap headings. Bootstrap display headings have a larger font size and lighter font weight when compared to the normal Bootstrap headings.

Q #3) What are the classes used for display headings?

Answer: It supports four display headings and uses .display-1 class, .display-2 class, .display-3 class and .display-4 class.

Q #4) What is the purpose of using lead?

Answer: It is used to make paragraphs stand out.

Q #5) How can you convert a lowercase word into an uppercase word?

Answer: You can use the .text-uppercase class to covert the text into uppercase.

Q #6) Does Bootstrap support responsive font sizes?

Answer: Yes, it supports responsive font sizes.

Conclusion

Bootstrap provides several classes to style text in various ways. Bootstrap color utilities help to add a wide range of colors to the text. Further, it supports responsive font sizes.

In our upcoming tutorial, we will discuss the Bootstrap tables and lists.

=> Take A Look At The Bootstrap Beginners Guide Here