Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Typography on BootstrapFont Family
You have three font-family helper classes available to use.
Monospace
<div class="font-sans-serif">Poppins</div>
<div class="font-base">Open Sans</div>
<code class="text-monospace">Monospace</code>Headings
All HTML headings, h1through h6, are available.
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>Headings with classes
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
<p class="h1">h1. Heading</p>
<p class="h2">h2. Heading</p>
<p class="h3">h3. Heading</p>
<p class="h4">h4. Heading</p>
<p class="h5">h5. Heading</p>
<p class="h6">h6. Heading</p>Customizing headings
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
Fancy display heading With faded secondary text
<h3>Fancy display heading<small class="text-muted"> With faded secondary text</small></h3>Font Weights
<div class="font-weight-thin">Font weight 100</div>
<div class="font-weight-lighter">Font weight 200</div>
<div class="font-weight-light">Font weight 300</div>
<div class="font-weight-normal">Font weight 400</div>
<div class="font-weight-medium">Font weight 500</div>
<div class="font-weight-semi-bold">Font weight 600</div>
<div class="font-weight-bold">Font weight 700</div>
<div class="font-weight-bolder">Font weight 800</div>
<div class="font-weight-black">Font weight 900</div>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
Display 5
Display 6
<h1 class="display-1 mb-3">Display 1</h1>
<h1 class="display-2 mb-3">Display 2</h1>
<h1 class="display-3 mb-3">Display 3</h1>
<h1 class="display-4 mb-3">Display 4</h1>
<h1 class="display-5 mb-3">Display 5</h1>
<h1 class="display-6 mb-3">Display 6</h1>Colors
Use the following colors to change the text color
.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
<h5 class="text-primary">.text-primary</h5>
<h5 class="text-info">.text-info</h5>
<h5 class="text-success">.text-success</h5>
<h5 class="text-warning">.text-warning</h5>
<h5 class="text-danger">.text-danger</h5>
<h5 class="text-black">.text-black</h5>
<h5 class="text-dark">.text-dark</h5>
<h5 class="text-1000">.text-1000</h5>
<h5 class="text-900">.text-900</h5>
<h5 class="text-800">.text-800</h5>
<h5 class="text-700">.text-700</h5>
<h5 class="text-600">.text-600</h5>
<h5 class="text-500">.text-500</h5>
<h5 class="text-400">.text-400</h5>
<h5 class="text-300"><span class="bg-black">.text-300</span></h5>
<h5 class="text-200"><span class="bg-dark">.text-200</span></h5>
<h5 class="text-light"><span class="bg-1000">.text-light</span></h5>
<h5 class="text-white"><span class="bg-900">.text-white</span></h5>Sizes
If you want different sizes of fonts, you may use the following classes.
.fs--2
.fs--1
.fs-0
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fs-7
.fs-8
<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>Text Transformation
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Lead
Make a paragraph stand out by adding .lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>Dropcap
Make a paragraph stand out by adding .dropcap class.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="dropcap">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
