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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

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