Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Headings

<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>

Customizing headings

Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

<h3> Fancy display heading <small class="text-body-secondary">With faded secondary text</small> </h3>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

<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> <h1 class="display-5">Display 5</h1> <h1 class="display-6">Display 6</h1>

Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.

Display headings are customizable via two variables, $display-font-family and $display-font-style.

$display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-family: null; $display-font-style: null; $display-font-weight: 300; $display-line-height: $headings-line-height;

Lead

Make a paragraph stand out by adding .lead.

<p class="lead"> This is a lead paragraph. It stands out from regular paragraphs. </p>

Inline text elements

Styling for common inline HTML5 elements.

<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>

Beware that those tags should be used for semantic purpose:

While not shown above, feel free to use and in HTML5. is meant to highlight words or phrases without conveying additional importance, while is mostly for voice, technical terms, etc.

Text utilities

Change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities.

Abbreviations

Stylized implementation of HTML’s 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.

Add .initialism to an abbreviation for a slightly smaller font-size.

<p><abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

For quoting blocks of content from another source within your document. Wrap

around any HTML as the quote.

<blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote>

Naming a source

The HTML spec requires that blockquote attribution be placed outside the

. When providing attribution, wrap your

in a

and use a