Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Typography on Bootstrap
Font Family

You have three font-family helper classes available to use.

Poppins
Open Sans
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
Font weight 300
Font weight 400
Font weight 500
Font weight 600
Font weight 700
Font weight 800
Font weight 900
<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-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fs-7
.fs-8
.fs-9
.fs-10
.fs-11
.fs-sm-9
.fs-md-8
.fs-lg-7
.fs-xl-6
<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>
<h6 class="fs-10">.fs-10</h6>
<h6 class="fs-11">.fs-11</h6>
<div class="mt-3">
  <h6 class="fs-sm-9">.fs-sm-9</h6>
  <h6 class="fs-md-8">.fs-md-8</h6>
  <h6 class="fs-lg-7">.fs-lg-7</h6>
  <h6 class="fs-xl-6">.fs-xl-6</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>

Thank you for creating with Falcon |
2024 © Themewagon

v3.23.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize