Documentation

Vue

Source & Credits

Upgrade Guide

Change Log

Typography

Display Heading

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<div class="bd-content">
    <p class="display-1">Display 1</p>
    <p class="display-2">Display 2</p>
    <p class="display-3">Display 3</p>
    <p class="display-4">Display 4</p>
    <p class="display-5">Display 5</p>
    <p class="display-6">Display 6</p>
</div>

Display Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

Inline text elements

Styling for common inline HTML5 elements.

  • <mark> represents text which is marked or highlighted for reference or notation purposes.
  • <small> represents side-comments and small print, like copyright and legal text.
  • <s> represents element that are no longer relevant or no longer accurate.
  • <u> represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.

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>