Typography

Headings


h1 Bootstrap Heading

h2 Bootstrap Heading

h3 Bootstrap Heading

h4 Bootstrap Heading

h5 Bootstrap Heading
h6 Bootstrap Heading

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

Headings with secondary text


h1 Bootstrap Heading Semibold 36px

h2 Bootstrap Heading Semibold 30px

h3 Bootstrap Heading Semibold 24px

h4 Bootstrap Heading Semibold 18px

h5 Bootstrap Heading Semibold 14px
h6 Bootstrap Heading Semibold 12px

<h1>h1 Bootstrap Heading <small>Semibold 36px</small></h1>
<h2>h2 Bootstrap Heading <small>Semibold 30px</small></h2>
<h3>h3 Bootstrap Heading <small>Semibold 24px</small></h3>
<h4>h4 Bootstrap Heading <small>Semibold 18px</small></h4>
<h5>h5 Bootstrap Heading <small>Semibold 14px</small></h5>
<h6>h6 Bootstrap Heading <small>Semibold 12px</small></h6>
	

Paragraphs


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit orci nibh, id bibendum massa facilisis sit amet. Praesent a facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer nunc enim, porta sed tellus non, pretium tristique lorem. In tristique est nec efficitur interdum. Phasellus quis posuere ante. Nulla id euismod nulla, id blandit orci. Cras bibendum leo ut neque rutrum mattis.

Sed tortor augue, laoreet ut pellentesque id, scelerisque in elit. Fusce viverra, sapien faucibus convallis bibendum, erat nisi posuere ante, non maximus ante ante et purus. Quisque bibendum orci ac erat iaculis commodo. Nunc convallis diam quis lacus lobortis, eu hendrerit odio venenatis. Pellentesque laoreet ultrices mi, eget feugiat enim. Ut a consequat sem. Etiam sollicitudin risus in ligula blandit interdum. Sed imperdiet quam ac metus fringilla, sagittis commodo augue rutrum. Vestibulum ac arcu et erat auctor feugiat a egestas arcu. In facilisis congue ante at venenatis. Nunc ipsum diam, ultricies non hendrerit sed, luctus maximus metus. Suspendisse mi nunc, scelerisque nec sem vitae, faucibus sagittis eros.

Aliquam sagittis vitae nisi et sollicitudin. Morbi ac erat malesuada, iaculis nisi a, fermentum lacus. Fusce sit amet tristique magna. Cras vitae feugiat ante. Suspendisse maximus viverra ullamcorper. Donec tristique, tortor at dapibus tincidunt, erat tellus hendrerit ante, ut tempor ante ex non ipsum. Morbi non vulputate nisi, pulvinar scelerisque justo. Nulla nec egestas ex.


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit orci nibh, id bibendum massa facilisis sit amet. Praesent a facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer nunc enim, porta sed tellus non, pretium tristique lorem. In tristique est nec efficitur interdum. Phasellus quis posuere ante. Nulla id euismod nulla, id blandit orci. Cras bibendum leo ut neque rutrum mattis.</p>
<p>Sed tortor augue, laoreet ut pellentesque id, scelerisque in elit. Fusce viverra, sapien faucibus convallis bibendum, erat nisi posuere ante, non maximus ante ante et purus. Quisque bibendum orci ac erat iaculis commodo. Nunc convallis diam quis lacus lobortis, eu hendrerit odio venenatis. Pellentesque laoreet ultrices mi, eget feugiat enim. Ut a consequat sem. Etiam sollicitudin risus in ligula blandit interdum. Sed imperdiet quam ac metus fringilla, sagittis commodo augue rutrum. Vestibulum ac arcu et erat auctor feugiat a egestas arcu. In facilisis congue ante at venenatis. Nunc ipsum diam, ultricies non hendrerit sed, luctus maximus metus. Suspendisse mi nunc, scelerisque nec sem vitae, faucibus sagittis eros.</p>
<p>Aliquam sagittis vitae nisi et sollicitudin. Morbi ac erat malesuada, iaculis nisi a, fermentum lacus. Fusce sit amet tristique magna. Cras vitae feugiat ante. Suspendisse maximus viverra ullamcorper. Donec tristique, tortor at dapibus tincidunt, erat tellus hendrerit ante, ut tempor ante ex non ipsum. Morbi non vulputate nisi, pulvinar scelerisque justo. Nulla nec egestas ex.</p>
	

Lead Paragraphs


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit orci nibh, id bibendum massa facilisis sit amet. Praesent a facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer nunc enim, porta sed tellus non, pretium tristique lorem. In tristique est nec efficitur interdum. Phasellus quis posuere ante. Nulla id euismod nulla, id blandit orci. Cras bibendum leo ut neque rutrum mattis.

Sed tortor augue, laoreet ut pellentesque id, scelerisque in elit. Fusce viverra, sapien faucibus convallis bibendum, erat nisi posuere ante, non maximus ante ante et purus. Quisque bibendum orci ac erat iaculis commodo. Nunc convallis diam quis lacus lobortis, eu hendrerit odio venenatis. Pellentesque laoreet ultrices mi, eget feugiat enim. Ut a consequat sem. Etiam sollicitudin risus in ligula blandit interdum. Sed imperdiet quam ac metus fringilla, sagittis commodo augue rutrum. Vestibulum ac arcu et erat auctor feugiat a egestas arcu. In facilisis congue ante at venenatis. Nunc ipsum diam, ultricies non hendrerit sed, luctus maximus metus. Suspendisse mi nunc, scelerisque nec sem vitae, faucibus sagittis eros.


<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit orci nibh, id bibendum massa facilisis sit amet. Praesent a facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer nunc enim, porta sed tellus non, pretium tristique lorem. In tristique est nec efficitur interdum. Phasellus quis posuere ante. Nulla id euismod nulla, id blandit orci. Cras bibendum leo ut neque rutrum mattis.</p>
<p>Sed tortor augue, laoreet ut pellentesque id, scelerisque in elit. Fusce viverra, sapien faucibus convallis bibendum, erat nisi posuere ante, non maximus ante ante et purus. Quisque bibendum orci ac erat iaculis commodo. Nunc convallis diam quis lacus lobortis, eu hendrerit odio venenatis. Pellentesque laoreet ultrices mi, eget feugiat enim. Ut a consequat sem. Etiam sollicitudin risus in ligula blandit interdum. Sed imperdiet quam ac metus fringilla, sagittis commodo augue rutrum. Vestibulum ac arcu et erat auctor feugiat a egestas arcu. In facilisis congue ante at venenatis. Nunc ipsum diam, ultricies non hendrerit sed, luctus maximus metus. Suspendisse mi nunc, scelerisque nec sem vitae, faucibus sagittis eros.</p>
	

Inline text elements


Highlighted text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit.
	

Deleted text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem <del>ipsum dolor sit amet</del>, consectetur adipiscing elit.
	

Strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor <s>sit amet</s>, consectetur adipiscing elit.
	

Inserted text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<ins>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ins>
	

Underlined text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, <u>consectetur adipiscing elit</u>
	

Small text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet<small>, consectetur adipiscing elit.</small>
	

Bold text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.
	

Italics text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<em>Lorem ipsum dolor sit amet</em>, consectetur adipiscing elit.
	

Alignment classes


Left aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.


<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

Center aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.


<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

Right aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.


<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

Justified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.


<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

No wrap text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper.


<p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper.</p>
	

Transformation classes


Text lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.


<p class="text-lowercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

Text uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex.


<p class="text-uppercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

Text capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.


<p class="text-capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mollis semper. Praesent sed ultricies libero, quis venenatis ex. Integer lorem orci, vestibulum in ullamcorper.</p>
	

Abbreviations


Basic abbreviation

An abbreviation of the word attribute is attr.


An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
	

Initialism

HTML is the best thing since sliced bread.


<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.
	

Addresses


Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
	

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
	

Blockquotes


Default

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


<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
	

With source

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

Someone famous in Source Title

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

Alternate

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

Someone famous in Source Title

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

Lists


Unordered list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
	

Ordered list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
    <ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ol>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>
	

Unstyled list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
	

Inline list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

<ul class="list-inline">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
</ul>
	

Description list

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
	

Horizontal description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>