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....

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.