Typography

Headings
Show Code

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6
                    
        <h1>h1. Heading 1</h1>
        <h2>h2. Heading 2</h2>
        <h3>h3. Heading 3</h3>
        <h4>h4. Heading 4</h4>
        <h5>h5. Heading 5</h5>
        <h6>h6. Heading 6</h6>
                    
                  
Text Settings
Show Code
Example ligtest text
Example light text
Example normal text
Example bold text
Example boldest text
Example uppercase text
Example lowercase text
Example capitalized text
Example normal case text
                    
        <div>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        </div>
        <div class="mt-3">
        <div class="text-uppercase">Example uppercase text</div>
        <div class="text-lowercase">Example lowercase text</div>
        <div class="text-capitalize">Example capitalized text</div>
        <div class="text-normal-case">Example normal case text</div>
        </div>
                    
                  
Display Headings
Show Code

Display 1

Display 2

Display 3

Display 4

                    
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
                    
                  
Inline text elements
Show Code

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

                    
        <p>You can use the mark tag to
        <mark>highlight</mark>
        text.
        </p>
        <p>
        <del>This line of text is meant to be treated as deleted text.</del>
        </p>
        <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
        <p>
        <ins>This line of text is meant to be treated as an addition to the document.</ins>
        </p>
        <p><u>This line of text will render as underlined</u></p>
        <p>
        <small>This line of text is meant to be treated as fine print.</small>
        </p>
        <p><strong>This line rendered as bold text.</strong></p>
        <p><em>This line rendered as italicized text.</em></p>
                    
                  
Abbreviations
Show Code
attr
HTML
                    
        <div>
        <abbr title="attribute">attr</abbr>
        </div>
        <div class="mt-3">
        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
        </div>
                    
                  
Blockquotes
Show Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    
        <blockquote class="blockquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>
                    
                  
Blockquotes with alignment
Show Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
                    
        <blockquote class="blockquote">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <blockquote class="blockquote text-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <blockquote class="blockquote text-right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
                    
                  
List unstyled
Show Code
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Eget porttitor lorem
                    
        <ul class="list-unstyled">
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit
        <ul>
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        </ul>
        </li>
        <li>Eget porttitor lorem</li>
        </ul>
                    
                  
List inline
Show Code
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
                    
        <ul class="list-inline">
        <li class="list-inline-item">Lorem ipsum</li>
        <li class="list-inline-item">Phasellus iaculis</li>
        <li class="list-inline-item">Nulla volutpat</li>
        </ul>
                    
                  
Lead
Show Code

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                    
        <p class="lead">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
        </p>