Home >>Bootstrap Tutorial >Bootstrap Typography

Bootstrap Typography

Bootstrap Typography

Typography provides some utilities to add additional styles to texts for styling and formatting.

Typography provides some additional styles to texts like customized heading, paragraph, inline subheadings, lists, styles and much more.

Bootstrap 4 has a default font size of 1rem (16px) and line height is 1.5.

It has also a default font-family is “Helvetica Neue”, Helvetica, sans-serif, Arial.

Headings

All HTML headings H1 to H6

Let's take an example of bootstrap heading:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>h1  heading </h1>
  <h2>h2  heading </h2>
  <h3>h3  heading </h3>
  <h4>h4  heading </h4>
  <h5>h5  heading </h5>
  <h6>h6  heading </h6>
</div>
</body>
</html>
Output:

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Display Headings

Display headings are displayed in larger font size with lighter font-weight comparison to normal font size. It is used to create better heading. These are the following four size of display heading:

.display-1, .display-2, .display-3, .display-4 Let's take an example of display heading:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container"> 
       <h1 class="display-1">Display-1</h1> 
        <h1 class="display-2">Display-2</h1> 
        <h1 class="display-3">Display-3</h1> 
        <h1 class="display-4">Display-4</h1> 
    </div>
</body>
</html>
Output:

Display-1

Display-2

Display-3

Display-4

<mark>

It provides yellow background color with some padding to the selected <mark> element.

Let's take an example of <mark>:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  <h3>Highlight Text</h3>    
  <p>welcome to <mark>phptpoint</mark></p>
</div>
</body>
</html>
Output:

Highlight Text

welcome to phptpoint

<blockquote>

Add the .blockquote class to a <blockquote> for presenting the blocks of content used from another source.

Let's take an example of <blockquote>:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  <h3>Blockquotes</h3>
  <blockquote class="blockquote">
    <p>Good, better, best. Never let it rest. 'Til your good is better and your better is best.</p>
    <footer class="blockquote-footer">St. Jerome</footer>
  </blockquote>
</div>
</body>
</html>
Output:

Blockquotes

Good, better, best. Never let it rest. 'Til your good is better and your better is best.

St. Jerome
Class Description
.font-weight-bold It provides Bold text to an element
.font-weight-bolder It provides Bolder text to an element
.font-italic It provides italic text to an element
.font-weight-light It provides Light weight text to an element
.font-weight-lighter It provides Lighter weight text to an element
.font-weight-normal It provides Normal text
.lead It makes a paragraph stand out and visually better
.small Indicates secondary subheading (smaller text -set to 80% of the size of the parent)
.text-left It provides the left-alignment to the text
.text-*-left It Indicates left-alignment of text on small, medium, large or xlarge screens
.text-break It break long string text into short string text
.text-center It indicates to align the text to the center
.text-*-center It Indicates center-alignment of text on small, medium, large or xlarge screens
.text-decoration-none It helps to remove the underline from link
.text-right It provides the right-alignment to the text
.text-*-right It Indicates right-alignment of text on small, medium, large or xlarge screens
.text-lowercase It provides lowercase (small) text
.text-uppercase It provides uppercase (capital) text
.blockquote It provides quote to the text content
.blockquote-footer It is used to provide the footer detail
.text-muted You can add text-muted for fading the text color. It change the normal text color into grey.

Popular Tutorials