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!
Last modified 1yr ago