Loading

Typhography

Font Family

You have three font-family helper classes available to use.

Oswald
Open Sans
<div class="text-sans-serif">Oswald</div>
<div class="text-base">Open Sans</div>

Headings

theme has all the html headings, <h1> through <h6>, styled for you. Also you can use .h1 through .h6 classes when you want to match the font styling of a heading but still want your text to be displayed inline.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph

This is a paragraph text. Following text are dummy copy text. Donec feugiat lorem dolor, eu fringilla urna tincidunt quis. In vitae dignissim lectus. Maecenas varius libero non metus rhoncus sagittis. Proin posuere iaculis auctor. Vivamus orci lorem, sollicitudin at convallis in, feugiat eget felis. Integer maximus, metus sit amet imperdiet semper, erat felis vulputate odio, nec malesuada metus.

your paragraph goes here.

<p>your paragraph goes here.</p>
Lead Paragraph and Drop cap

Make a paragraph stand out by adding .lead and for drop cap, use .dropcap class.

ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus at cumque deleniti dolores, est fugiat harum impedit ipsam, itaque iusto magnam natus neque, nulla placeat quis quod recusandae sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque consectetur culpa eos est exercitationem harum impedit iusto magnam molestiae neque non officia, pariatur possimus rem sapiente, sequi! Beatae, quae.

<p class="dropcap lead"> ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus at cumque deleniti dolores, est fugiat harum impedit ipsam, itaque iusto magnam natus neque, nulla placeat quis quod recusandae sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque consectetur culpa eos est exercitationem harum impedit iusto magnam molestiae neque non officia, pariatur possimus rem sapiente, sequi! Beatae, quae.</p>

Font Weights

Here the examples of fonts weight

font-weight-thin

font-weight-extra-normal

font-weight-extra-medium

font-weight-semi-bold

font-weight-bold

font-weight-extra-bold

font-weight-black 

<div class="font-weight-thin">{font-weight: 100 !important;}</div>
<div class="font-weight-extra-light">{font-weight: 200 !important;}</div>
<div class="font-weight-light">{font-weight: 300 !important;}</div>
<div class="font-weight-normal">{font-weight: 400 !important;}</div>
<div class="font-weight-medium">{font-weight: 500 !important;}</div>
<div class="font-weight-semi-bold">{font-weight: 600 !important;}</div>
<div class="font-weight-bold">{font-weight: 700 !important;}</div>
<div class="font-weight-extra-bold">{font-weight: 800 !important;}</div>
<div class="font-weight-black">{font-weight: 900 !important;}</div>

Colors

Use the folloing classes to change the text color.

.text-primary
.text-info
.text-success
.text-warning
.text-danger
.text-black
.text-dark
.text-1000
.text-900
.text-800
.text-700
.text-600
.text-500
.text-400
.text-300
.text-200
.text-light
.text-white
<h5 class="text-primary">.text-primary</h5>
<h5 class="text-info">.text-info</h5>
<h5 class="text-success">.text-success</h5>
<h5 class="text-warning">.text-warning</h5>
<h5 class="text-danger">.text-danger</h5>
<h5 class="text-black">.text-black</h5>
<h5 class="text-dark">.text-dark</h5>
<h5 class="text-1000">.text-1000</h5>
<h5 class="text-900">.text-900</h5>
<h5 class="text-800">.text-800</h5>
<h5 class="text-700">.text-700</h5>
<h5 class="text-600">.text-600</h5>
<h5 class="text-500">.text-500</h5>
<h5 class="text-400">.text-400</h5>
<h5 class="text-300"><span class="bg-black">.text-300</span></h5>
<h5 class="text-200"><span class="bg-dark">.text-200</span></h5>
<h5 class="text-light"><span class="bg-1000">.text-light</span></h5>
<h5 class="text-white"><span class="bg-900">.text-white</span></h5>

Size

If you want different sizes of fonts, you may use the following classes.

.fs--2
.fs--1
.fs-0
.fs-1
.fs-2
.fs-4
.fs-5
.fs-6
.fs-7
.fs-8
<h6 class="fs--2">.fs--2</h6>
<h6 class="fs--1">.fs--1</h6>
<h6 class="fs-0">.fs-0</h6>
<h6 class="fs-1">.fs-1</h6>
<h6 class="fs-2">.fs-2</h6>
<h6 class="fs-4">.fs-4</h6>
<h6 class="fs-5">.fs-5</h6>
<h6 class="fs-6">.fs-6</h6>
<h6 class="fs-7">.fs-7</h6>
<h6 class="fs-8">.fs-8</h6>

Text Alignment

Left Alignment
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<div class="text-left">Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.</div>
Right Alignment
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<div class="text-right">Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.</div>
Center Aligned
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<div class="text-center">Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.</div>
Justified
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<div class="text-justify">Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.</div>

Text Transformation

Lowercased text
Uppercased text
Capitalized text
<div class="text-lowercase">Lowercased text</div>
<div class="text-uppercase">Uppercased text</div>
<div class="text-capitalize">Capitalized text</div>

Inline styles

Use these tags for inline styling. Feel free to use <b> and <em> tags insted of <strong> and <i> tags.

Highlight text

Deleted text

Underlined text

Small text

Bold text

Italic text

<p><mark>Highlight text</mark></p>
<p><del>Deleted text</del></p>
<p><u>Underlined text</u></p>
<p><small>Small text</small></p>
<p><strong>Bold text</strong></p>
<p><i>Italic text</i></p>

Blockquotes

Racing is life, everything before or after is just waiting.”

Frank Zappa
<blockquote class="blockquote my-3">
  <p class="fs-2 text-800 font-italic">Racing is life, everything before or after is just waiting.”</p>
  <footer class="blockquote-footer">Frank Zappa</footer>
</blockquote>

Order Listing

Unordered List

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit<ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>
Ordered List

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  4. Faucibus porta lacus fringilla vel
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit<ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ol>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ol>
Unstyled List

Adding list-unstyled class to ul element will produce the following list style:

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul class="list-unstyled pl-4">
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>
Checkmarked List

Adding style-check class to ul element will produce the following list style:

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel 
<ul class="style-check">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel </li>
</ul>