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.
<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 launch