Home >>Bootstrap Tutorial >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.

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads