Bootstrap4 Typography

Bootstrap 4 Default Settings

Bootstrap 4 defaults to a font-size of 16px and a line-height of 1.5.

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

Additionally, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px).

<h1> - <h6>

Bootstrap defines styles for all HTML headings (h1 through h6). See the example below:

Example

<div class="container">
  <h1>h1 Bootstrap Heading (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap Heading (2rem = 32px)</h2>
  <h3>h3 Bootstrap Heading (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap Heading (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap Heading (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap Heading (1rem = 16px)</h6>
</div>

Display Headings

Bootstrap also provides four Display classes to control the style of headings: .display-1, .display-2, .display-3, .display-4.

Example

<div class="container">
  <h1>Display Headings</h1>
  <p>Display headings can output larger and bolder font styles.</p>
  <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>

<small>

In Bootstrap 4, the HTML <small> element is used to create smaller, lighter text:

Example

<div class="container">
  <h1>Smaller Text Headings</h1>
  <p>The small element is used for smaller, lighter text:</p>       
  <h1>h1 Heading <small>Subheading</small></h1>
  <h2>h2 Heading <small>Subheading</small></h2>
  <h3>h3 Heading <small>Subheading</small></h3>
  <h4>h4 Heading <small>Subheading</small></h4>
  <h5>h5 Heading <small>Subheading</small></h5>
  <h6>h6 Heading <small>Subheading</small></h6>
</div>

<mark>

Bootstrap 4 defines <mark> with a yellow background and some padding:

Example

<div class="container">
  <h1>Highlighted Text</h1>    
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

<abbr>

Bootstrap 4 styles the HTML <abbr> element with a dotted border at the bottom of the text:

Example

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

For quoted content, you can add the .blockquote class to <blockquote>:

Example

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
</div>

<blockquote>

For quoted content, you can add the .blockquote class to <blockquote>:

Example

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
</div>

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. <footer class="blockquote-footer">From WWF's website</footer> </blockquote> </div>

---

## <dl>

Bootstrap 4 styles the HTML `<dl>` element as follows:

## Example

<div class="container"> <h1>Description Lists</h1>
<p>The dl element indicates a description list:</p> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
</div>

---

## <code>

Bootstrap 4 styles the HTML `<code>` element as follows:

## Example

<div class="container"> <h1>Code Snippets</h1> <p>Place code elements within the code tag:</p> <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> define sections of the document.</p> </div>

## <kbd>

Bootstrap 4 styles the HTML `<kbd>` element as follows:

## Example

<div class="container"> <h1>Keyboard Inputs</h1> <p>To indicate input typically entered via the keyboard, use the kbd element:</p> <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p> </div>

---

## <pre>

Bootstrap 4 styles the HTML `<pre>` element as follows:

## Example

<div class="container"> <h1>Multiple Lines of Code</h1> <p>For multiple lines of code, use the pre element:</p> <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. </pre> </div> ```

More Typography Classes

The table below provides examples of more Bootstrap 4 typography classes: