TYPOGRAPHY ELEMENTS

.h1, h1, Heading 1

.h2, h2, Heading 2

.h3, h3, Heading 3

.h4, h4, Heading 4

.h5, h5, Heading 5

.h6, h6, Heading 6

<h1>Heading 1</h1>, <span class="h1">Heading 1</span>
<h2>Heading 2</h2>, <span class="h2">Heading 1</span>
<h3>Heading 3</h3>, <span class="h3">Heading 1</span>
<h4>Heading 4</h4>, <span class="h4">Heading 1</span>
<h5>Heading 5</h5>, <span class="h5">Heading 1</span>
<h6>Heading 6</h6>, <span class="h6">Heading 1</span>

.h1, h1, Heading 1 Secondary text

.h2, h2, Heading 2 Secondary text

.h3, h3, Heading 3 Secondary text

.h4, h4, Heading 4 Secondary text

.h5, h5, Heading 5 Secondary text

.h6, h6, Heading 6 Secondary text

<h1>Heading 1 <small>Secondary text</small></h1>
<h2>Heading 2 <small>Secondary text</small></h2>
<h3>Heading 3 <small>Secondary text</small></h3>
<h4>Heading 4 <small>Secondary text</small></h4>
<h5>Heading 5 <small>Secondary text</small></h5>
<h6>Heading 6 <small>Secondary text</small></h6>

Heading 1 Praesent non massa justo

Heading 2 Nam purus orci

Heading 3 Vestibulum quis odio sapien

Heading 4 Curabitur congue viverra tortor nec viverra

Heading 5 Phasellus posuere elit a tortor mattis vitae porta quam posuere

<h1 class="withBorder">Heading 1 Praesent non massa justo</h1>
<h2 class="withBorder">Heading 2 Nam purus orci</h2>
<h3 class="withBorder">Heading 3 Vestibulum quis odio sapien</h3>
<h4 class="withBorder">Heading 4 Curabitur congue viverra tortor nec viverra</h4>
<h5 class="withBorder">Heading 5 Phasellus posuere elit a tortor mattis vitae porta quam posuere</h5>

Body copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Inline text elements

Marked text

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Deleted text

~~This line of text is meant to be treated as deleted text.~~

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

~~This line of text is meant to be treated as no longer accurate.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted text

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Underlined text

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Small text

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

<span class="small">This line of text is meant to be treated as fine print.</span>

Bold

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alignment classes

Left aligned text. Etiam ac blandit ante. Cras semper vulputate lacus, et semper tortor eleifend ac. Sed in consequat orci, eu posuere metus. Quisque cursus, nulla sed placerat accumsan, velit leo cursus justo, non dictum sem tortor in mi. Quisque lacinia orci sed nisl pharetra iaculis. Quisque odio quam, laoreet eu ligula ut, venenatis congue arcu. Sed ullamcorper dolor eget luctus malesuada. In nisl nisi, cursus in elit lobortis, euismod suscipit dolor. Nulla condimentum sit amet lorem ac lobortis. Nulla semper egestas massa. Sed fringilla urna consequat tortor auctor, vitae volutpat neque sagittis. Nunc molestie tempus euismod. Praesent mollis consectetur leo, ullamcorper auctor tellus ullamcorper a.

Center aligned text. Suspendisse potenti. Mauris leo neque, ullamcorper luctus metus vel, ultricies hendrerit diam. Phasellus justo orci, aliquet eu mi quis, commodo viverra enim. Vivamus hendrerit, dolor ac adipiscing porta, nunc felis mollis sapien, non interdum erat sapien et eros. Integer commodo mauris ut diam varius, nec auctor elit consectetur. Donec sed congue tellus. Sed laoreet sodales erat quis scelerisque. Etiam sed erat rutrum diam elementum pretium. Donec ac sapien pharetra sapien ultricies sollicitudin vitae quis felis. Nunc feugiat dui quis nibh congue imperdiet. Nam sed enim sodales, sollicitudin lorem in, fringilla lectus.

Right aligned text. Duis sit amet ipsum quam. Aenean id purus neque. Ut id urna ligula. Aliquam volutpat ac nisi nec semper. Etiam suscipit neque eros, ac dapibus arcu accumsan in. Quisque vitae libero fringilla, molestie leo a, placerat nunc. Integer et faucibus est. Ut id ullamcorper eros. Suspendisse at posuere velit. Cras ac feugiat velit, non mollis velit. Curabitur tristique nulla nec magna dignissim, id hendrerit ligula lobortis. Donec eleifend eros lectus, sit amet scelerisque tortor vehicula in.

Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere nec turpis et scelerisque. Maecenas commodo volutpat tincidunt. Integer convallis viverra quam in condimentum. Ut id malesuada nunc. Nunc consequat orci ac tellus pretium, non pharetra nisl consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet non leo at lobortis. Cras commodo tortor pulvinar imperdiet euismod. Morbi eu laoreet metus. Donec sit amet commodo nibh, non ullamcorper massa. Quisque lobortis tincidunt sem, a interdum mi ullamcorper in.

No wrap text. Phasellus id nunc faucibus, faucibus orci eget, molestie elit. Sed eu ante lectus. Nullam et viverra ante. Ut vel consequat orci, et tempus metus. Integer vulputate nisl cursus risus pretium, non posuere dui auctor. Vestibulum bibendum scelerisque leo, et ultricies velit viverra vel. Cras consectetur, neque vel auctor consectetur, turpis nunc sodales ante, eu rutrum mauris lacus at nunc. Etiam ut malesuada sem. Aenean vel rutrum risus. Mauris vitae turpis in nunc cursus convallis.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviations

Basic abbreviation

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

Initialism

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

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

Full Name
first.last@example.com

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

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>

Blockquote options

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>

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

Someone famous in Source Title

<blockquote class="blockquote-reverse">
...
</blockquote>

Page header

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Lists

Unordered List

Vestibulum non velit et nisi vestibulum pellentesque.
Donec ante augue, pharetra sed suscipit non, bibendum sed diam.
Integer sed mi enim. Nunc pharetra dignissim pharetra.
Etiam accumsan dolor quis ipsum semper quis elementum sem suscipit.
- Nulla ut lacus adipiscing erat condimentum vestibulum.
- Sed nisl nulla, interdum eget aliquam placerat, euismod eget dui.
- Cras cursus consectetur tristique.
- Nullam id lacus urna.
  - Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  - Vivamus tincidunt mi ut lectus aliquet molestie quis quis nisi.
  - Sed aliquet ipsum sit amet ipsum consectetur malesuada.
  - Vestibulum quis odio sapien.
  - Phasellus posuere elit a tortor mattis vitae porta quam posuere.

<ul>
    <li> Vestibulum non velit et nisi vestibulum pellentesque. </li>
    <li>...</li>
</ul>

Ordered List

Ut pharetra dignissim diam at facilisis.
Maecenas commodo porta vulputate.
Aliquam mattis eleifend ante, in tempor augue blandit feugiat.
Morbi tortor nisl, dapibus sed iaculis in, pharetra nec risus.
Donec sollicitudin fermentum lacus, eget sollicitudin orci sodales in.
1. Suspendisse id risus ullamcorper sapien ornare blandit gravida tempus sem.
2. Nam id nulla magna, non ultricies sem.
3. Praesent dictum gravida orci scelerisque rutrum.
  1. Vestibulum ut dignissim est.
  2. Aliquam volutpat, augue nec placerat luctus, nisi quam semper sem, eget rhoncus nulla ligula ac eros.
  3. Aliquam vitae mauris non sem condimentum mattis.

<ol>
    <li> Vestibulum non velit et nisi vestibulum pellentesque. </li>
    <li>...</li>
</ol>

Styled list

Curabitur ut justo justo.
Curabitur hendrerit rutrum dapibus.
Sed adipiscing ligula non quam tempus dignissim.
Vestibulum eget lorem elit, at aliquam nulla.

<ul class="starBullet">
    <li>Quosqie temups magna sagittis magna viverra sit amet feugiat neque biben</li>
    <li>...</li>
</ul>

Unstyled

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>...</li>
</ul>

Inline

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
<li>...</li>
</ul>

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>
<dt>...</dt>
<dd>...</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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

Contextual colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Contextual backgrounds