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>

 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>

 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>

 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>

 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>