Typography

Headings

This is an H1 heading

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

This is an H2 heading

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

This is an H3 heading

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

This is an H4 heading

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

This is an H5 heading

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

This is an H6 heading

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

Emphasis

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>

The following snippet of text is rendered as bold text.

The following snippet of text is <strong>rendered as bold text.</strong>

The following snippet of text is rendered as italicized text.

The following snippet of text is <em>rendered as italicized text.</em>

Abbreviations

An abbreviation of the word attribute is attr.

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

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

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>...</p>

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

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

Alignment classes

Left aligned text.

<p class="text-left">Left aligned text.</p>

Center aligned text.

<p class="text-center">Center aligned text.</p>

Right aligned text.

<p class="text-right">Right aligned text.</p>

Emphasis classes

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

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

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

<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

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

<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

Etiam porta sem malesuada magna mollis euismod.

<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Blockquotes

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>
                

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

Back to Top