logo logo-dark
Components

Typography

These examples for typography, including global settings, headings, body text, lists, and more. When more control is needed, check out the textual utility classes.

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

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title
Code Example
<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>

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>
© 2020 DashLite. Template by Softnio