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, h1 through 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-500 dark__text-500"> With faded secondary text</small></h3>Font Weights
<div class="fw-light">Font weight 300</div>
<div class="fw-normal">Font weight 400</div>
<div class="fw-medium">Font weight 500</div>
<div class="fw-semi-bold">Font weight 600</div>
<div class="fw-bold">Font weight 700</div>
<div class="fw-bolder">Font weight 800</div>
<div class="fw-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
Theme Colors:
.text-primary
.text-info
.text-success
.text-warning
.text-danger
.text-dark
.text-light
Grays:
.text-black
.text-1000
.text-900
.text-800
.text-700
.text-600
.text-500
.text-400
.text-300
.text-200
.text-white
Emphasis Colors:
.text-primary-emphasis
.text-info-emphasis
.text-success-emphasis
.text-warning-emphasis
.text-danger-emphasis
.text-body-emphasis
.text-dark-emphasis
.text-light-emphasis
<h4>Theme Colors:</h4>
<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-dark">.text-dark</h5>
<h5 class="text-light"><span class="bg-1000">.text-light</span></h5>
<h4 class="mt-4">Grays:</h4>
<h5 class="text-black">.text-black</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-white"><span class="bg-900">.text-white</span></h5>
<h4 class="mt-4">Emphasis Colors: </h4>
<h5 class="text-primary-emphasis">.text-primary-emphasis</h5>
<h5 class="text-info-emphasis">.text-info-emphasis</h5>
<h5 class="text-success-emphasis">.text-success-emphasis</h5>
<h5 class="text-warning-emphasis">.text-warning-emphasis</h5>
<h5 class="text-danger-emphasis">.text-danger-emphasis</h5>
<h5 class="text-body-emphasis">.text-body-emphasis</h5>
<h5 class="text-dark-emphasis">.text-dark-emphasis</h5>
<h5 class="text-light-emphasis">.text-light-emphasis</h5>Responsive classes
If you want different sizes of fonts, you may use the following classes. If you want responsive fonts size, use fs-{sm|md|lg|xl|xxl}-{value} classes.
.fs--2
.fs--1
.fs-0
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fs-7
.fs-8
.fs-sm-0
.fs-md-1
.fs-lg-2
.fs-xl-3
<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>
<div class="mt-3">
<h6 class="fs-sm-0">.fs-sm-0</h6>
<h6 class="fs-md-1">.fs-md-1</h6>
<h6 class="fs-lg-2">.fs-lg-2</h6>
<h6 class="fs-xl-3">.fs-xl-3</h6>
</div>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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius porro hic ex. Earum similique laudantium esse nostrum sed corporis. Libero omnis quos deleniti amet aliquam nam. Natus voluptas reiciendis eligendi reprehenderit, facere tenetur distinctio sunt officia, temporibus aperiam voluptatum quo ducimus illum incidunt adipisci doloremque rem est magnam in, molestiae excepturi odit. Reprehenderit ullam.
<p class="dropcap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius porro hic ex. Earum similique laudantium esse nostrum sed corporis. Libero omnis quos deleniti amet aliquam nam. Natus voluptas reiciendis eligendi reprehenderit, facere tenetur distinctio sunt officia, temporibus aperiam voluptatum quo ducimus illum incidunt adipisci doloremque rem est magnam in, molestiae excepturi odit. Reprehenderit ullam.</p>
