Typography

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