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