Bootstrap 4 Typography Tutorial With Example

In Bootstrap 4 Typography Tutorial With Example, we describe different tag like pre, dl, blockquote, etc. Bootstrap 4 front-end web development framework uses particular settings for text and provides classes for typography. This example will go over these classes and tags.

Bootstrap 4 Typography Tutorial With Example

#1: Introduction

Tutorial for bootstrap 4 typography, including global settings, headings, body text, lists, and more.

#2: Bootstrap 4 Default Settings

Bootstrap 4 also changes the default text settings.

  • Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
  • The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.
  • Each  <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

You are definitely free to change any of these values to suit your individual project.

#3: Headings

All HTML headings, <h1> through <h6>, are available.

Heading Example
<h1></h1> h1. Bootstrap heading
<h2></h2> h2. Bootstrap heading
<h3></h3> h3. Bootstrap heading
<h4></h4> h4. Bootstrap heading
<h5></h5> h5. Bootstrap heading
<h6></h6> h6. Bootstrap heading

Now see the basic example of heading.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h1>h1 Bootstrap heading</h1>
  <h2>h2 Bootstrap heading</h2>
  <h3>h3 Bootstrap heading</h3>
  <h4>h4 Bootstrap heading</h4>
  <h5>h5 Bootstrap heading</h5>
  <h6>h6 Bootstrap heading</h6>
</div>
</body>
</html>

You can see output like below screenshot.

bootstrap 4 typography example

#4: Display Headings

Display headings are used more than normal headings.

There are four classes to choose from: .display-1.display-2.display-3.display-4

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
 <h1 class="display-1">Display 1</h1>
 <h2 class="display-2">Display 2</h2>
 <h3 class="display-3">Display 3</h3>
 <h4 class="display-4">Display 4</h4>
</div>
</body>
</html>

bootstrap 4 typography tutorial

#5: <small>

In Bootstrap 4 the HTML <small> element is used to create a secondary, lighter text in any heading.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
 <h1>Heading 1 <small>smaller text</small></h1>
 <h2>Heading 2 <small>smaller text</small></h2>
 <h3>Heading 3 <small>smaller text</small></h3>
 <h4>Heading 4 <small>smaller text</small></h4>
 <h5>Heading 5 <small>smaller text</small></h5>
 <h6>Heading 6 <small>smaller text</small></h6>
</div>
</body>
</html>

bootstrap 4 typography small tag example

#6: <mark>

Bootstrap 4 style the HTML <mark> element with a yellow background color and some padding.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<p>Some of this <mark>text</mark> is <mark>marked</mark></div>
</body>
</html>

bootstrap 4 typography mark tag example

#7: <abbr>

Bootstrap 4 styles the HTML <abbr> this element by adding a small dotted underline.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Abbreviations</h1>
<p>The <abbr title="International Federation of Association Football">FIFA</abbr> was founded in 1904.</p>
</body>
</html>

bootstrap 4 typography abbreviations tag example

#8: <blockquote>

To use bootstrap 4 add the .blockquote class to a <blockquote> when quoting blocks of content from another source.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<blockquote class="blockquote">
    <p>It takes 20 years to build a reputation and five minutes to ruin it. If you think about that, you'll do things differently.</p>
    <footer class="blockquote-footer">Warren Buffett</footer>
  </blockquote>
</body>
</html>

bootstrap 4 typography blockquotes tag example

#9: <dl>

In Bootstrap 4, description lists are rendered like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Description Lists</h1>
  <dl>
    <dt>Ronaldo</dt>
    <dd>- Portugal Football Team Captain</dd>
    <dt>Messi</dt>
    <dd>- Argentina Football Team Captain</dd>
  </dl>    
</body>
</html>

bootstrap 4 typography dl tag example

#10: <code>

Bootstrap 4 styles this <code> elements by combining a colored background, with padding that has rounded corners, and changing the color of the font.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Code Snippets</h1>
  <p>Hello, <code>how are</code> you ?</p>
</body>
</html>

bootstrap 4 typography code tag example

#11: <kbd>

Bootstrap 4 styles <kbd> elemnt by adding a black background, padding with rounded corners.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Keyboard Inputs</h1>
  <p>Use <kbd>ctrl + s</kbd> to save the data.</p>
</body>
</html>

bootstrap 4 typography kbd tag example

#12: <pre>

Bootstrap 4 styles <pre> element by changing the font-family.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Typography Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Pre Tag</h1>
    <pre>Price is what you pay. Value is what you get.</pre>
</body>
</html>

bootstrap 4 typography pre tag example

#13: Bootstrap 4 Typography Classes

The Bootstrap 4 classes below can be added to style HTML elements further.

Class Description
.font-weight-bold Bold text
.font-weight-normal Normal text
.font-weight-light Light weight text
.font-italic Italic text
.lead Make paragraph stand out
.small Small text (sets to 85% of the size of parent element font-size)
.text-left Align text to left
.text-center Align text to center
.text-right Align text to right
.text-justify Justify text
.text-nowrap Make text not wrap
.text-lowercase Lowercase text
.text-uppercase Uppercase text
.text-capitalize Capitalize text
.initialism Display text inside <abbr> element in slightly smaller font size
.list-unstyled Removemargin on left and list-style of list items (applicable to both <ul> and <ol>). Only applicable to direct child list items (applies to nested lists as well)
.list-inline Place all list items on one line (used along with
.list-inline-item for each <li> element)
.pre-scrollable Make <pre> elements scrollable
At last, our Bootstrap 4 Typography Tutorial With Example is over.
One Comment

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.