> CSS Base > Typography

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>

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>

Fancy display heading With faded secondary text

<h3>Fancy display heading <small class="text-muted">With faded secondary text</small></h3>

Display 1

Display 2

Display 3

Display 4

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

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>

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>

attr

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Button

Shake the Headline

Make a whole block of text shake

Basic

0

0 things to count.

Fancy, Multiple

Rockets to Mars

Stars out my Window

<p style="text-align: center;"><strong><span class="wcount" data-n="12345" style="text-align: center;">0</span> things to count.</strong></p>

<div class="wcounter">

<div class="wcountitem">
<div class="wcounterhead"><i class="fas fa-rocket fa-fw"> </i>
<div class="h3 wcount" data-n="4321">0</div>
Rockets to Mars</div>
</div>

<div class="wcountitem">
<div class="wcounterhead"><i class="fas fa-star fa-fw"> </i>
<div class="h3 wcount" data-n="9876">0</div>
Stars out my Window</div>
</div>

</div>

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Fancy display heading With faded secondary text

Display 1

Display 2

Display 3

Display 4

Shake the Headline

Basic

0

Fancy, Multiple

Modal Title