Bootstrap 4 Typography Tweet

Bootstrap 4 sets basic global display, typography, and link styles which can be changed easily using text utility classes. It uses the best font family for each OS and device assuming the browsers' default font size as 16px while the body background is set to #fff.

Headings

All headings from <h1> to <h6> are available which will be displayed as follows.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

When you can't use the heading tags, you can use the classes h1 to h6 as shown below for similar dislay.

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Display Headings

You can also use large headings that stand out on a page using classes display-1 to display-4.

Display 1

Display 2

Display 3

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>

Lead

You can use class lead to make a paragraph stand out.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

Mark and Small

Classes mark and small are also included to create the same effect their namesake html elements do.

Abbreviation

You can add class initialism to make the abbreviation text size slightly smaller than others.

Blockquote

Class blockquote is available for blockquote styling with blockquote-footer class added to citation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod unt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<blockquote class="blockquote">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod unt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  <footer class="blockquote-footer">Someone <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists

List Unstyled

Add class list-unstyled to <ul> to remove list style and left-margin from lists.

• List Item
• List Item
• List Item
• List Item

<ul class="list-unstyled">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

List Inline

You can also use list-inline class along with list-inline-item added to its children to display them inline.

• List Item
• List Item
• List Item
• List Item

<ul class="list-inline">
  <li class="list-inline-item">List Item</li>
  <li class="list-inline-item">List Item</li>
  <li class="list-inline-item">List Item</li>
  <li class="list-inline-item">List Item</li>
</ul>

Code

You can use HTML element <code> to add inline snippets of code which will be displayed in a different color.

Code Block

If you need to add a block of code use <pre> with class pre-scrollable which will set a max-height of 340px and makes the content scrollable.

<p>You can use HTML element <code><code></code> to add inline snippets of code.</p>

Jumbotron

Class jumbotron allows you to add large text content for better focus.

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple jumbotron content for extra attention.</p>
</div>

Add class jumbotron-fluid for full width jumbotron without border radius. You'll need to add class container or container-fluid for gutters though.

<div class="jumbotron jumbotron-fluid">
  <div class="container-fluid">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple jumbotron content for extra attention.</p>
  </div>
</div>