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

<div class="row">
    <div class="col-md-3">
        <h1>Heading <strong>H1</strong></h1>
        <h2>Heading <strong>H2</strong></h2>
        <h3>Heading <strong>H3</strong></h3>
        <h4>Heading <strong>H4</strong></h4>
        <h5>Heading <strong>H5</strong></h5>
        <h6>Heading <strong>H6</strong></h6>
    </div>
    <div class="col-md-3">
        <h1 class="text-uppercase">Heading <strong>H1</strong></h1>
        <h2 class="text-uppercase">Heading <strong>H2</strong></h2>
        <h3 class="text-uppercase">Heading <strong>H3</strong></h3>
        <h4 class="text-uppercase">Heading <strong>H4</strong></h4>
        <h5 class="text-uppercase">Heading <strong>H5</strong></h5>
        <h6 class="text-uppercase">Heading <strong>H6</strong></h6>
    </div>
    <div class="col-md-3">
        <div class="heading heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
        <div class="heading heading-border heading-bottom-border">
            <h2>Heading <strong>H2</strong></h2>
        </div>
        <div class="heading heading-border heading-bottom-border">
            <h3>Heading <strong>H3</strong></h3>
        </div>
        <div class="heading heading-border heading-bottom-border">
            <h4>Heading <strong>H4</strong></h4>
        </div>
        <div class="heading heading-border heading-bottom-border">
            <h5>Heading <strong>H5</strong></h5>
        </div>
        <div class="heading heading-border heading-bottom-border">
            <h6>Heading <strong>H6</strong></h6>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-border heading-bottom-double-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
        <div class="heading heading-border heading-bottom-double-border">
            <h2>Heading <strong>H2</strong></h2>
        </div>
        <div class="heading heading-border heading-bottom-double-border">
            <h3>Heading <strong>H3</strong></h3>
        </div>
        <div class="heading heading-border heading-bottom-double-border">
            <h4>Heading <strong>H4</strong></h4>
        </div>
        <div class="heading heading-border heading-bottom-double-border">
            <h5>Heading <strong>H5</strong></h5>
        </div>
        <div class="heading heading-border heading-bottom-double-border">
            <h6>Heading <strong>H6</strong></h6>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="heading heading-border heading-middle-border">
    <h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-middle-border">
    <h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border">
    <h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-middle-border">
    <h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-middle-border">
    <h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-middle-border">
    <h6>Heading <strong>H6</strong></h6>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
    <h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
    <h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
    <h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
    <h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
    <h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
    <h6>Heading <strong>H6</strong></h6>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="heading heading-border heading-middle-border heading-middle-border-center">
    <h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
    <h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
    <h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
    <h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
    <h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
    <h6>Heading <strong>H6</strong></h6>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center">
            <h2>Heading <strong>H2</strong></h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-lg">
            <h2>Heading <strong>H2</strong></h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-xl">
            <h2>Heading <strong>H2</strong></h2>
        </div>
    </div>
</div>

 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

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

 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

<div class="row">
    <div class="col-md-3">
        <div class="heading heading-primary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-secondary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-tertiary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-quaternary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="heading heading-primary heading-border heading-bottom-border">
            <h1 class="heading-primary">Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-secondary heading-border heading-bottom-border">
            <h1 class="heading-secondary">Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-tertiary heading-border heading-bottom-border">
            <h1 class="heading-tertiary">Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-quaternary heading-border heading-bottom-border">
            <h1 class="heading-quaternary">Heading <strong>H1</strong></h1>
        </div>
    </div>
</div>

 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

<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center center">
            <h2>Heading with <span class="inverted">Highlight</span> Colors.</h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center center">
            <h2>Heading with <span class="inverted inverted-secondary">Highlight</span> Colors.</h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center center">
            <h2>Heading with <span class="inverted inverted-tertiary">Highlight</span> Colors.</h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center center">
            <h2>Heading with <span class="inverted inverted-quaternary">Highlight</span> Colors.</h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center center">
            <h2><span class="text-color-primary">Multiple</span> <span class="text-color-secondary">Colors</span> in the <span class="text-color-tertiary">Same</span> <span class="text-color-quaternary">Heading</span></h2>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="row">
    <div class="col-md-12">
        <h1 class="mb-none">Heading <strong>H1</strong></h1>
        <p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>
        <h2 class="mb-none">Heading <strong>H2</strong></h2>
        <p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>
        <h3 class="mb-none">Heading <strong>H3</strong></h3>
        <p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>
        <h4 class="mb-none">Heading <strong>H4</strong></h4>
        <p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>
        <h5 class="mb-none">Heading <strong>H5</strong></h5>
        <p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>
    </div>
</div>