Typography

Documentation and examples for Bootstrap typography, including headings, sizes, and more.

Font Family

  • Roboto

  • Oswald
  • PT Moto

<p>Roboto</p>
<h6>Oswald</h6>
<code>PT Moto</code>

Headings

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

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.

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>

Colors

Convey meaning through color with a handful of color utility classes.

.text-primary
.text-info
.text-success
.text-warning
.text-danger
.text-black
.text-dark
.text-1000
.text-900
.text-800
.text-700
.text-600
.text-500
.text-400
.text-300
.text-200
.text-light
.text-white

<h6 class="text-primary">.text-primary</h6>
<h6 class="text-info">.text-info</h6>
<h6 class="text-success">.text-success</h6>
<h6 class="text-warning">.text-warning</h6>
<h6 class="text-danger">.text-danger</h6>
<h6 class="text-black">.text-black</h6>
<h6 class="text-dark">.text-dark</h6>
<h6 class="text-1000">.text-1000</h6>
<h6 class="text-900">.text-900</h6>
<h6 class="text-800">.text-800</h6>
<h6 class="text-700">.text-700</h6>
<h6 class="text-600">.text-600</h6>
<h6 class="text-500">.text-500</h6>
<h6 class="text-400">.text-400</h6>
<h6 class="text-300">.text-300</h6>
<h6 class="text-200">.text-200</h6>
<h6 class="text-light"><span class="bg-dark">.text-light</span></h6>
<h6 class="text-white"><span class="bg-dark">.text-white</span></h6>

Sizes

.fs--3
.fs--2
.fs--1
.fs-0
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fs-7
.fs-8
.fs-9

<h6 class="fs--3">.fs--3</h6>
<h6 class="fs--2">.fs--2</h6>
<h6 class="fs--1">.fs--1</h6>
<h6 class="fs-0">.fs-0</h6>
<h6 class="fs-1">.fs-1</h6>
<h6 class="fs-2">.fs-2</h6>
<h6 class="fs-3">.fs-3</h6>
<h6 class="fs-4">.fs-4</h6>
<h6 class="fs-5">.fs-5</h6>
<h6 class="fs-6">.fs-6</h6>
<h6 class="fs-7">.fs-7</h6>
<h6 class="fs-8">.fs-8</h6>
<h6 class="fs-9">.fs-9</h6>

Blockquote

Donec eleifend ante sed lacus cursus finibus. Nam dignissim posuere tellus sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam quam ligula, fringilla ut convallis interdum, sagittis eu nisi.
Benjamin Parker

<blockquote class="blockquote fst-italic">
    Donec eleifend ante sed lacus cursus finibus. Nam dignissim posuere tellus sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam quam ligula, fringilla ut convallis interdum, sagittis eu nisi.
    <footer class="blockquote-footer text-end"><span class="text-600">Benjamin Parker</span></footer>
</blockquote>

For more Details see Bootstrap Typography Documentation