Typography
Typo is very important for web projects.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
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>
Bold text
The following snippet of text is rendered as bold text.
The following snippet of text is <strong>rendered as bold text.</strong>
Italics
The following snippet of text is rendered as italicized text.
The following snippet of text is <em>rendered as italicized text.</em>
Abbreviations
Basic abbreviation
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
Initialism
HTMLis the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Addresses
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
Paragraph
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>
Lead paragraph
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>
In the Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.