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
 7
 8
 9
10
11
12
<h1>
    H1 Heading</h1>
<h2>
    H2 Heading</h2>
<h3>
    H3 Heading</h3>
<h4>
    H4 Heading</h4>
<h5>
    H5 Heading</h5>
<h6>
    H6 Heading</h6>

Heading Helper Classes

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

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 data-tooltip="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>

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<div class="row center">
    <div class="col-md-2">
        <h1>
            H1</h1>
        <h2>
            H2</h2>
        <h3>
            H3</h3>
        <h4>
            H4</h4>
        <h5>
            H5</h5>
        <h6>
            H6</h6>
    </div>
    <div class="col-md-2">
        <h1 class="heading-primary">
            H1</h1>
        <h2 class="heading-primary">
            H2</h2>
        <h3 class="heading-primary">
            H3</h3>
        <h4 class="heading-primary">
            H4</h4>
        <h5 class="heading-primary">
            H5</h5>
        <h6 class="heading-primary">
            H6</h6>
    </div>
    <div class="col-md-2">
        <h1 class="heading-secondary">
            H1</h1>
        <h2 class="heading-secondary">
            H2</h2>
        <h3 class="heading-secondary">
            H3</h3>
        <h4 class="heading-secondary">
            H4</h4>
        <h5 class="heading-secondary">
            H5</h5>
        <h6 class="heading-secondary">
            H6</h6>
    </div>
    <div class="col-md-2">
        <h1 class="heading-tertiary">
            H1</h1>
        <h2 class="heading-tertiary">
            H2</h2>
        <h3 class="heading-tertiary">
            H3</h3>
        <h4 class="heading-tertiary">
            H4</h4>
        <h5 class="heading-tertiary">
            H5</h5>
        <h6 class="heading-tertiary">
            H6</h6>
    </div>
    <div class="col-md-2">
        <h1 class="heading-quaternary">
            H1</h1>
        <h2 class="heading-quaternary">
            H2</h2>
        <h3 class="heading-quaternary">
            H3</h3>
        <h4 class="heading-quaternary">
            H4</h4>
        <h5 class="heading-quaternary">
            H5</h5>
        <h6 class="heading-quaternary">
            H6</h6>
    </div>
    <div class="col-md-2">
        <h1 class="heading-light">
            H1</h1>
        <h2 class="heading-light">
            H2</h2>
        <h3 class="heading-light">
            H3</h3>
        <h4 class="heading-light">
            H4</h4>
        <h5 class="heading-light">
            H5</h5>
        <h6 class="heading-light">
            H6</h6>
    </div>
</div>

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.

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div class="row">
    <div class="col-md-6">
        <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>
    </div>
    <div class="col-md-6">
        <p class="drop-caps drop-caps-style-2">
            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>
    </div>
</div>

Code

Inline

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

Basic Block

<p>Sample text here...</p>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="row">
    <div class="col-md-6">
        <h4>
            Inline</h4>
        <p>
            For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
    </div>
    <div class="col-md-6">
        <h4>
            Basic Block</h4>
        <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
    </div>
</div>