Typography

Bootstrap includes simple and easily customized typography for headings, body text, lists, and more.

Headings

All HTML headings classes .h1 through .h6 are also available.

h1. Bootstrap heading

 1.75rem (28px)

h2. Bootstrap heading

 1.5rem (24px)

h3. Bootstrap heading

 1.25rem (20px)

h4. Bootstrap heading

 1.125rem (18px)
h5. Bootstrap heading
 1.125rem (18px)
h6. Bootstrap heading
 1rem (16px) 
<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>

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

Fancy display heading With faded secondary text 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Display headings

When you need a heading to stand out, consider using a display-* class.

6rem (96px)

Display 1

5.5rem (88px)

Display 2

4.5rem (72px)

Display 3

3.5rem (56px)

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

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.    
</p>

Subheading

h2 Bootstrap subheading

h4 Bootstrap subheading

Small text Bootstrap subheading 
<h2 class="subheading">h2 Bootstrap subheading</h2>
<h4 class="subheading">h4 Bootstrap subheading</h4>  
<small class="subheading">Small text Bootstrap subheading</small>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit integer.

<blockquote class="blockquote">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit integer.</p>
</blockquote>

Reverse layout

Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote blockquote-reverse">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>