Typography

Headings

Use class title to generate line under heading.

h1 Heading small

h2 Heading small

h3 Heading small

h4 Heading small

h5 Heading small
h6 Heading small

h1 Heading strong

h2 Heading strong

h3 Heading strong

h4 Heading strong

h5 Heading strong
h6 Heading strong

h1 Capitalize

h2 Capitalize

h3 Capitalize

h4 Capitalize

h5 Capitalize
h6 Capitalize

Text

This is lead paragraph. The best place to use it is the begining paragraph of the post. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, tenetur!

To use lead you only have to add lead class to a <p> tag, consectetur adipisicing elit. Voluptatem, quam, qui, ducimus cumque doloribus deleniti enim corporis sequi iste maiores aliquam cum incidunt esse quod minima laborum et ratione tempora?

Strong

Strong text. Use <strong> tag. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, enim, libero, est voluptates ut impedit ipsam error dolor sed voluptatum veniam sit ducimus quidem? Iusto, deleniti, nemo labore impedit fuga culpa odio molestias unde autem reiciendis fugit harum assumenda cumque rerum tempore optio accusamus eligendi ut quam alias eos deserunt!

Emphasis

Italic text <em>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, enim, libero, est voluptates ut impedit ipsam error dolor sed voluptatum veniam sit ducimus quidem? Iusto, deleniti, nemo labore impedit fuga culpa odio molestias unde autem reiciendis fugit harum assumenda cumque rerum tempore optio accusamus eligendi ut quam alias eos deserunt!

Small

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi, sequi, esse, doloremque error praesentium a provident officiis similique ab perferendis pariatur alias totam minima ratione numquam adipisci vitae nisi aliquam neque aspernatur. Laboriosam, dignissimos, mollitia provident delectus nam optio possimus ipsa reprehenderit illo consectetur explicabo id dolore doloribus quaerat?

Drop cap

To use drop cap add to paragraph .drop-cap class. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, enim, libero, est voluptates ut impedit ipsam error dolor sed voluptatum veniam sit ducimus quidem? Iusto, deleniti, nemo labore impedit fuga culpa odio molestias unde autem reiciendis fugit harum assumenda cumque rerum tempore optio accusamus eligendi ut quam alias eos deserunt!

Alignment classes

Left aligned text. Class text-left. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, ipsum reiciendis placeat officia earum iste quasi illum pariatur eius recusandae! Ducimus, et, error, voluptatibus velit eligendi delectus quasi impedit voluptates minus tempore ut natus odio aliquam ex praesentium quia fugiat eos animi ab in iure aut maiores sunt minima quisquam.

Center aligned text. Class text-center. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, ipsum reiciendis placeat officia earum iste quasi illum pariatur eius recusandae! Ducimus, et, error, voluptatibus velit eligendi delectus quasi impedit voluptates minus tempore ut natus odio aliquam ex praesentium quia fugiat eos animi ab in iure aut maiores sunt minima quisquam.

Right aligned text. Class text-right. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, ipsum reiciendis placeat officia earum iste quasi illum pariatur eius recusandae! Ducimus, et, error, voluptatibus velit eligendi delectus quasi impedit voluptates minus tempore ut natus odio aliquam ex praesentium quia fugiat eos animi ab in iure aut maiores sunt minima quisquam.

Justify aligned text. Class text-justify. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, ipsum reiciendis placeat officia earum iste quasi illum pariatur eius recusandae! Ducimus, et, error, voluptatibus velit eligendi delectus quasi impedit voluptates minus tempore ut natus odio aliquam ex praesentium quia fugiat eos animi ab in iure aut maiores sunt minima quisquam.

Address 1

Algedi
Jana Pwala II 12,
41-100 Siemianowice, Poland
P: +48 32 105 67 89
M: +48 519 86 26 26
Algedi mail
first.last@example.com

How to:


<address>
	<strong>Algedi</strong><br>
	Jana Pwala II 12,<br>
	41-100 Siemianowice, Poland<br>
	<abbr title="Phone">P:</abbr> +48 32 105 67 89<br>
	<abbr title="Mobile">P:</abbr> +48 519 86 26 26
</address>
<address>
	<strong>Algedi mail</strong><br>
	<a "mailto:#">first.last@example.com</a>
</address>
							

Address 2

Address:
Jana Pwala II 12,
41-100 Siemianowice, Poland
Phone:
+48 32 105 67 89
Mobile:
+48 519 86 26 26

How to:


<address>
	<dl>
		<dt>Address: </dt> 
		<dd>Jana Pwala II 12,<br> 
		41-100 Siemianowice, Poland</dd> 
		<dt>Phone: </dt> 
		<dd>+48 32 105 67 89</dd> 
		<dt>Mobile: </dt> 
		<dd>+48 519 86 26 26</dd> 
	</dl>
</address>
							

Blockquotes

Default blockquote

<blockquote>
	Lorem ipsum...
</blockquote>
 

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

Blockquote with signature

<blockquote>
	Lorem ipsum...
	<footer>signature...</footer>
</blockquote>

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

Someone famous in Source Title

Reversed blockquote on dark background

<section class="background">
	<blockquote class="blockquote-reverse">
		Lorem ipsum...
		<footer>signature...</footer>
	</blockquote>
</section>

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

Someone famous in Source Title

Lists - unordered

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

Lists - ordered

<ol>...</ol>
  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
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  9. Faucibus porta lacus fringilla vel
  10. Aenean sit amet erat nunc
  11. Eget porttitor lorem
  12. Ac tristique libero volutpat at

Check-list

<ul class="check">...</ul>
  • Lorem ipsum dolor sit.
  • Nisi, dignissimos in quia.
  • Unde iure aliquam porro!
  • Ab, aspernatur expedita architecto.
  • Esse consequuntur accusamus laboriosam.
  • Hic adipisci asperiores repellat?
  • Quae, nostrum aliquam vero!
  • Nesciunt quibusdam in laudantium!
  • Eum, culpa ducimus suscipit.
  • Modi aperiam tempore cupiditate.
  • Sequi voluptatem natus obcaecati.

"X" list

<ul class="times">...</ul>
  • Lorem ipsum dolor sit.
  • Officia, veritatis recusandae repellendus.
  • Libero, dolore eaque autem.
  • Ea, consequatur a quis.
  • Hic, illum nihil odio.
  • Laboriosam, laborum esse dignissimos.
  • Enim, itaque accusantium dolor.
  • Veniam, voluptatibus a quia.
  • Nemo, porro delectus unde.
  • Ab, omnis esse cum?
  • Voluptatum, totam qui accusamus.

Chevron list

<ul class="chevron">...</ul>
  • Lorem ipsum dolor sit.
  • In, ab dolore magnam!
  • Expedita, repellendus animi exercitationem!
  • Iste, perferendis iure obcaecati.
  • Laboriosam reprehenderit perferendis animi.
  • Corrupti officiis est voluptates.
  • Laudantium ipsam perspiciatis sed.
  • Nostrum, quia nihil ut.
  • Quam error tempora iusto.
  • Aperiam sapiente repellendus totam.
  • Ratione esse blanditiis dolor.

Tag list

<ul class="tags">...</ul>
  • Lorem ipsum dolor sit.
  • In, ab dolore magnam!
  • Expedita, repellendus animi exercitationem!

Category list

<ul class="categories">...</ul>
  • Laboriosam reprehenderit perferendis animi.
  • Corrupti officiis est voluptates.
  • Laudantium ipsam perspiciatis sed.

Basic responsive table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob class="success" Thornton @fat
3 Larry the Bird @twitter
4 Tony class="warning" Stengel @twitter
4 John Hightower @hightower
5 Larry class="danger" Lentini @twitter
6 Bruce Carranza @carranzar
7 Sam class="info" Heine @twitter

Bordered responsive table

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

More information about typography you'll find here