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.5 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-underline.

Underlined link
<a href="#" class="link-underline">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.

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

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

<figure class="ms-5">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mt-n2">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

<figure>
<blockquote class="blockquote text-center">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer text-center mt-n2">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

<figure class="me-5">
<blockquote class="blockquote text-end">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer text-end mt-n2">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

Bootstrap Documentation

Colors

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark

Bootstrap Documentation