Typography

Search…
Typography
Headings
Example 1
Source Code
1
<h1>h1. BootStrap Heading</h1>
2
<h2>h2. BootStrap Heading</h2>
3
<h3>h3. BootStrap Heading</h3>
4
<h4>h4. BootStrap Heading</h4>
5
<h5>h5. BootStrap Heading</h5>
6
<h6>h6. BootStrap Heading</h6>
Copied!
Display Headings
Example 2
Source Code
1
<h1 class="display-1">h1. BootStrap Heading</h1>
2
<h2 class="display-2">h2. BootStrap Heading</h2>
3
<h3 class="display-3">h3. BootStrap Heading</h3>
4
<h4 class="display-4">h4. BootStrap Heading</h4>
5
<h5 class="display-5">h5. BootStrap Heading</h5>
6
<h6 class="display-6 mb-0">h6. BootStrap Heading</h6>
Copied!
Paragraph
Basic
Lead
1
<p>
2
    Element for abbreviations and acronyms to show the expanded
3
    version on hover. Abbreviations have a default underline and gain a
4
    help cursor to provide additional context on hover and to users of
5
    assistive technologies.
6
</p>
Copied!
1
<p class="lead">
2
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
3
    auctor duis mollis, est non commodo luctus.
4
</p>
Copied!
Blockquote
Start
Center
End
1
<blockquote class="blockquote">
2
    <span class="badge badge-light mb-3">Default</span>
3
    <p class="mb-0">
4
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus
5
        dolo auctor duis mollis, est non commodo luctus.
6
    </p>
7
    <footer class="blockquote-footer">Someone famous with <cite title="Source Title">source title</cite>
8
    </footer>
9
</blockquote>
Copied!
1
<blockquote class="blockquote text-center">
2
    <span class="badge badge-light mb-3">Center Aligned</span>
3
    <p class="mb-0">
4
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus
5
        dolo auctor duis mollis, est non commodo luctus.
6
    </p>
7
    <footer class="blockquote-footer">Someone famous with <cite title="Source Title">source title</cite>
8
    </footer>
9
</blockquote>
Copied!
1
<blockquote class="blockquote text-right">
2
    <span class="badge badge-light mb-3">Right Aligned</span>
3
    <p class="mb-0">
4
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus
5
        dolo auctor duis mollis, est non commodo luctus.
6
    </p>
7
    <footer class="blockquote-footer">Someone famous with <cite title="Source Title">source title</cite>
8
    </footer>
9
</blockquote>
Copied!
List
List
Source Code
​
1
<ul class="list-unstyled">
2
    <li>Consectetur adipiscing elit</li>
3
    <li>Integer molestie lorem at massa</li>
4
    <li>Facilisis in pretium nisl aliquet
5
        <ul>
6
            <li>Phasellus iaculis neque</li>
7
            <li>Ac tristique libero volutpat at</li>
8
        </ul>
9
    </li>
10
    <li>Faucibus porta lacus fringilla vel</li>
11
    <li>Aenean sit amet erat nunc</li>
12
</ul>
Copied!
Components - Previous
Scrollspy
Next - Classic Version
Setup
Last modified 1yr ago
Copy link
Contents