Typography

Documentation and examples for Boost typography, including headings, body text, blockquotes, and more.

Headings

All HTML headings, <h1> through <h6>, are available.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

        
            <h1>Heading level 1</h1>
            <h2>Heading level 2</h2>
            <h3>Heading level 3</h3>
            <h4>Heading level 4</h4>
            <h5>Heading level 5</h5>
            <h6>Heading level 6</h6>
        
    

Lead

Make a paragraph stand out by adding .lead.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        
            <p class="lead">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        
    

Divider

Add a .sep class to the hr element to convert it to a short, 2 pixels width separator. Then you can change its color and alignment using utility classes.

Example

Excepteur sint occaecat cupidatat non proident.

        
            <p class="h3">Example</p>
            <hr role="presentation" class="border-primary sep text-left ml-0">
            <p>Excepteur sint occaecat cupidatat non proident.</p>
        
    

Important: Include the role="presentation" attribute to indicate to screen readers that is a decorative element.

Blockquotes

Add .blockquote for quoting blocks of content from another source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous
        
            <blockquote class="blockquote">
                <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer class="blockquote-footer">Someone famous</footer>
            </blockquote>
        
    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous
        
            <blockquote class="blockquote text-center">
                <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer class="blockquote-footer">Someone famous</footer>
            </blockquote>
        
    

Font family

Quickly change the font family (serif/sans-serif) of text using .font-serif and .font-sans-serif.

Font Sans Serif

Font Serif

        
            <h6 class="font-sans-serif">Font Sans Serif</h6>
            <p class="font-serif">Font Serif</p>
        
    

Responsive font sizes

The theme has the enable responsive font size option turned on, allowing text to scale more naturally across device and viewport sizes.

Bootstrap Documentation