Bootstrap 4
Bootstrap 4 Typography
Bootstrap 4 typography is  including headings, display headings, small, lead, inline text elements, blackquotes etc,.

 Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.

Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the . The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

All headings and p elements have their top margin removed. Headings have a bottom margin of .5rem and p elements have a bottom margin of 1rem.
Headings

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

<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>
Output :
Display headings

Display headings are designed to stand out more than the normal headings(larger font-size and lighter font-weight). There are 4 sizes of display heading (.display-1, .display-2, .display-3, and .display-4).

<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>
Output :
Sub headings (<small>)

The HTML <small> element is used to create a lighter, secondary text in any heading:

<h1>h1 Bootstrap heading <small>(2.5rem = 40px)</small></h1>
<h2>h2 Bootstrap heading <small>(2rem = 32px)</small></h2>
<h3>h3 Bootstrap heading <small>(1.75rem = 28px)</small></h3>
<h4>h4 Bootstrap heading <small>(1.5rem = 24px)</small></h4>
<h5>h5 Bootstrap heading <small>(1.25rem = 20px)</small></h5>
<h6>h6 Bootstrap heading <small>(1rem = 16px)</small></h6>
Output :
Lead

Make a paragraph stand out by adding .lead.

<p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
Output :
Inline text elements

Styling for common inline HTML5 elements.

<p>Lorem Ipsum is simply <mark>dummy text</mark> of the printing and typesetting industry.</p>
<p><del>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</del></p>
<p><s>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</s></p>
<p><ins>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</ins></p>
<p><u>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</u></p>
<p><small>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small></p>
<p><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</strong></p>
<p><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</em></p>
Output :
Blockquote

The Bootstrap 4 .blockquote class to a <blockquote> when quoting blocks of content from another source :

  <h1>Blockquotes</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <blockquote class="blockquote">
    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <footer class="blockquote-footer">From FTL website</footer>
  </blockquote>
  
  <hr />
  
  <h1>Blockquotes Alignment</h1>
  <blockquote class="blockquote text-center">
  <p class="mb-0">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <footer class="blockquote-footer">From  <cite title="Source Title">FTL</cite> Website</footer>
 </blockquote>
Output :
Lists
Lists — Unstyled

You can use the Bootstrap 4 .list-unstyled class to render lists without their default list-style and left-margin:

<ul class="list-unstyled">
   <li>HTML</li>
   <li>HTML5</li>
   <li>CSS</li>
   <li>CSS3</li>
   <li>Bootstrap
      <ul>
        <li>Bootstrap 3</li>
        <li>Bootstrap 4</li>
      </ul>
    </li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>
Output :
Lists — Inline

You can use the Bootstrap .list-inline and .list-inline-item classes to render lists as display : inline-block and to apply some padding:

<ul class="list-inline">
	<li class="list-inline-item">HTML</li>
	<li class="list-inline-item">CSS</li>
	<li class="list-inline-item">Bootstrap</li>
	<li class="list-inline-item">JavaScript</li>
	<li class="list-inline-item">jQuery</li>
</ul>
Output :

Bootstrap 4 More Typography Classes is there....