Typography | Coronavirus (COVID-19) Situation Tracker & Dashboard

Headings

All HTML headings, <h1> through <h6>, are available.

Heading	Example
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

Class Reference	Note
`<h[num]>`, `.h[num]`	1 \| 2 \| 3 \| 4 \| 5 \| 6

Uses Example

<h4 class="title"> ... </h4>
<span class="title h4"> ... </span>

Customizing headings

Use the text utility classes to more customizing the heading text.

Fancy display heading With faded secondary text

Uses Example

<h3 class="ff-base fw-medium">
  Fancy display heading
  <small class="text-soft">With faded secondary text</small>
</h3>

Inline Element & Text Style

Change text alignment, transform, style, weight, and color with our text utilities and color utilities.

Code Reference	Preview
`<mark>`	You can use the mark tag to highlight text.
`<del>`	~~This line of text is meant to be treated as deleted text.~~
`<s>`	~~This line of text is meant to be treated as no longer accurate.~~
`<ins>`	This line of text is meant to be treated as an addition to the document.
`<u>`	This line of text will render as underlined
`<small>`	This line of text is meant to be treated as fine print.
`<strong>`	This line rendered as bold text.
`<sup>`	This ^text rendered as superscript
`<sub>`	This _text rendered as subscript
`<abbr>`	Abbreviations have a default underline and gain a help cursor
`.lead`	This line of text is meant to lead text to stand out.

Uses Example

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p class="lead">This line of text is meant to lead text to stand out.</p>

Blockquotes

For quoting blocks of content from another source within your document. Use .blockquote in <blockquote>.

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

Code Example

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

Lists - Style

Use .list class with <ul> element to style basic listing. Also your can use .list-checked with .list class for different style as below.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis nequeep
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis nequeep
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Eget porttitor lorem

Additionally you can use .list-sm and .list-lg for displaying small and large.

Code Example

<ul class="list list-checked">
  <li>Lorem ipsum dolor sit amet</li>
    <ul>
      <li>Phasellus iaculis nequeep</li>
    </ul>
  </li>
  <li>Eget porttitor lorem</li>
</ul>

Lists - Unstyled

Use .list-unstyled class with <ul> element to make unstyled

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis nequeep
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Eget porttitor lorem

Code Example

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
    <ul>
      <li>Phasellus iaculis nequeep</li>
    </ul>
  </li>
  <li>Eget porttitor lorem</li>
</ul>

Lists - Inline

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Code Example

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Description list alignment

Align terms and descriptions horizontally by using our grid system’s predefined classes.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Code Example

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>