Skip to main content

Style

Typography and colors used to design this theme.

Typography

Type Example Font Font Size
Display 1 ABCabc Fira Sans 5.5 rem
Display 2 ABCabc Fira Sans 5 rem
Display 3 ABCabc Fira Sans 4.5 rem
Display 4 ABCabc Fira Sans 4 rem
Display 5 ABCabc Fira Sans 3.5 rem
Display 6 ABCabc Fira Sans 3 rem
Heading 1 ABCabc Playfair Display 2.75 rem
Heading 2 ABCabc Playfair Display 2 rem
Heading 3 ABCabc Playfair Display 1.75 rem
Heading 4 ABCabc Playfair Display 1.5 rem
Heading 5 ABCabc Playfair Display 1.25 rem
Heading 6 ABCabc Playfair Display 1 rem
Paragraph ABCabc Fira Sans 1 rem

Font family

Easily change the font family using .font-sans and .font-serif.

Example of a paragraph using font serif.

<p class="font-serif">Example of a paragraph using font serif.</p>

Lead

Make a paragraph stand out by adding .lead.

The quick brown fox jumps over the lazy dog.

<p class="lead">The quick brown fox jumps over the lazy dog.</p>

Links

Links inside paragraphs are underlined by default.

This is a link example.

<p>This is a <a href="#">link example</a>.</p>

If you want to underline a link that is not inside a paragraph, use .link-highlight.

Underlined link 
<a href="#" class="link-highlight">Underlined link</a>

Quote

Add .quote to add style and quotes to a text.

Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.

<p class="quote">Excepteur sint occaecat...</p>

Blockquote

Add .blockquote for quoting blocks of content from another source.

A well-known quote, contained in a blockquote element.

Someone famous 
<figure class="ms-5">
  <blockquote class="blockquote mb-4">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous
  </figcaption>
</figure>

Typography in Bootstrap docs

Colors

Colors in Bootstrap docs