Typography

H1 Heading

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

H2 Heading

Pellentesque pellentesque usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. tellus eget tempor. Fusce lacinia tempor malesuada.

H3 Heading

Pellentesque tempor tellus eget pellentesque. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

H4 Heading

Pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.

H5 Heading

Pellentesque pellentesque tempor llentesque pellentesque tempor tellus eget libero llentesque pellentesque tempor tellus eget libero tellus ementellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellenellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellenum.

H6 Heading

Pellentesque pellentesque tempor tellus eget libero

HTML Shortcode

1
2
3
4
5
6
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Lists

Unordered

  • 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

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<h4>
    Unordered</h4>
<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
        <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>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Faucibus porta lacus fringilla vel
  6. Aenean sit amet erat nunc
  7. Eget porttitor lorem
  8. Consectetur adipiscing elit
  9. Integer molestie lorem at massa
  10. Facilisis in pretium nisl aliquet
  11. Faucibus porta lacus fringilla vel
  12. Aenean sit amet erat nunc

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
</ol>

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

HTML Shortcode

1
2
3
4
5
6
7
8
9
<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>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</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.

HTML Shortcode

1
2
3
4
5
6
7
8
9
<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>

Icons

  • Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • ...more icons

HTML Shortcode

1
2
3
4
5
6
<ul class="list icons list-unstyled">
    <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fa fa-envelope-alt"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. </li>
    <li><em class="fa fa-film"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
</ul>

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

HTML Shortcode

1
2
3
4
5
<ul class="inline">
    <li>Lorem ipsum</li>
    <li>Phasellus iaculis</li>
    <li>Nulla volutpat</li>
</ul>

Heading Helper Classes

Heads up! You can use helper classes in order to align better the titles.
Such as: short, shorter, tall, taller, spaced, more-spaced and page-header.

HTML Shortcode

1
2
3
4
5
6
<p>
    <span class="label label-info">Heads up!</span> You can use helper classes in order
    to align better the titles.<br />
    <strong>Such as:</strong> short, shorter, tall, taller, spaced, more-spaced and
    page-header.
</p>

Blockquote

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Source Title

HTML Shortcode

1
2
3
4
5
6
7
<blockquote>
    <p>
        Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque
        purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo
        ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium
        ut lacinia tortor. <cite title="Source Title">Source Title</cite></p>
</blockquote>

Paragraph

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate.

Check the alternative font style.

Check the alternative font style.

Mauris tooltip aliquet link ultricies ante, non bold faucibus ante gravida sed. Sed ultrices rendered as italicized text pellentesque purus, vulputate volutpat ipsum hendrerit sed neque..

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

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<p class="lead">
    Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque
    purus, vulputate.</p>
<p class="lead">
    Check the <span class="alternative-font">alternative</span> font style.</p>
<p>
    Check the <span class="alternative-font">alternative</span> font style.</p>
<p>
    Mauris <a rel="tooltip" data-placement="top" href="#" data-original-title="Tooltip!">
        tooltip</a> aliquet <a href="#">link</a> ultricies ante, non <strong>bold</strong>
    faucibus ante gravida sed. Sed ultrices <em>rendered as italicized text</em> pellentesque
    purus, vulputate volutpat ipsum hendrerit sed neque..</p>
<p>
    <small>This line of text is meant to be treated as fine print.</small>
</p>
<p class="text-muted">
    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">
    Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">
    Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">
    Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">
    Donec ullamcorper nulla non metus auctor fringilla.</p>

Drop Caps

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

HTML Shortcode

1
<p class="drop-caps">Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

HTML Shortcode

1
<p class="drop-caps secundary">Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

Code

Inline

For example, <section> should be wrapped as inline.

HTML Shortcode

1
<code>&lt;section&gt;</code>

Basic Block

Sample text here...

HTML Shortcode

1
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Tables

Striped

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

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Bordered

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

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>