$body-bg

BRAND $body-color

Use Primary color$primary to draw attention to important elements $body-color

You can use dark color to draw attention to important elements or to group elements that areconceptually relate $dark

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus voluptate consectetur numquam sint sit quod voluptas vero, This is a link $link-color
Perferendis architecto libero reiciendis saepe qui iure beatae cum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. $body-color

$primary $secondary

$dark $light

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suspendisse a lacus est.

$primary $secondary

The quick brown fox jumps over the lazy dog

$body-color .opacity-50

I'm body text color with an opacity-50 class.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolorum dolor quam, ut libero cumque! Nemo eius nulla, iusto libero.

$light $dark

I'm a dark text on a light background.
dolor sit amet, consectetur adipisicing elit. Optio a numquam nemo vitae commodi, obcaecati reprehenderit ea

Default Body, Dark and Light variants

Body

Dark

Light

This is .lead content

This is an h2 Heading

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam, vulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus.

.bg-dark, .text-light This is .lead content inside

This is an h2 Heading

.bg-light, .text-dark This is .lead content inside

This is an h2 Heading

Bootstrap Typography Classes

Heading

All HTML headings are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

						<h1>h1. Heading 1</h1> 
						<h2>h2. Heading 2</h2> 
						<h3>h3. Heading 3</h3> 
						<h4>h4. Heading 4</h4> 
						<h5>h5. Heading 5</h5> 
						<h6>h6. Heading 6</h6>

Heading 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. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Display Classes

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">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Responsive Font Size

Control the font size of an element using the rfs-{size} utilities.

rfs-1

rfs-2

rfs-3

rfs-4

rfs-5

rfs-6

rfs-7

rfs-8

rfs-9

rfs-10

rfs-11

rfs-12

rfs-13

rfs-14

rfs-15

rfs-16

rfs-17

rfs-18

rfs-19

rfs-20

rfs-21

rfs-22

rfs-23

rfs-24

rfs-25

rfs-30

rfs-35

rfs-40

rfs-45

rfs-50

<p class="rfs-1">rfs-1</p>
<p class="rfs-2">rfs-2</p>
...

Lead

Make a paragraph stand out by adding .lead.

This is a lead paragraph. It stands out from regular paragraphs.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

BRAND $body-color

Use Primary color$primary to draw attention to important elements $body-color

Lorem ipsum dolor sit amet, consectetur adipisicing elit. $body-color

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suspendisse a lacus est.

The quick brown fox jumps over the lazy dog

Color Style Guide

Color Scheme

Default Body, Dark and Light variants

This is an h2 Heading

This is an h2 Heading

This is an h2 Heading

Theme Colors with Shades

Text:

Background:

Border:

Navbars

Buttons

Typography Style Guide

Article Headline

Bootstrap Typography Classes

Heading

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Heading Classes

Display Classes

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Responsive Font Size

Lead

Inline text elements

Sample Sections

Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse a lacus est. Etiam diam metus, lobortis

The quick brown fox jumps over the lazy dog

Enigma Gown

$150.00

Corrupti quis atque ex quibusdam omnis ut

Et nisi laboriosam quia qui tempora odit aspernatur.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

2016

2021