Typography
These modular elements can be readily used and customized in every layout across pages.
For detail documentation. View Typography on Bootstrap⟶
Font Family
You have three sets of font-family
available to use.
Monospace
<div class="font-sans-serif">Raleway</div>
<div class="font-base">Roboto</div>
<div> <code>Monospace</code></div>
Headings
Slick 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>
Paragraphs
This is a paragraph text. Following text are dummy copy text. Donec feugiat lorem dolor, eu fringilla urna tincidunt quis.
<p>This is a paragraph text. Following text are dummy copy text. Donec feugiat lorem dolor, eu fringilla urna tincidunt quis.</p>
Lead Paragraph and Drop cap
Make a paragraph stand out by adding .lead
and for drop cap, use .dropcap
class.
Morem 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">Morem 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
<div class="font-weight-thin">{font-weight: 100 !important;}</div>
<div class="font-weight-lighter">{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-bolder">{font-weight: 800 !important;}</div>
<div class="font-weight-black">{font-weight: 900 !important;}</div>
Colors
Use the following colors 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>
Sizes
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
<p class="fs--2">.fs--2</p>
<p class="fs--1">.fs--1</p>
<p class="fs-0">.fs-0</p>
<p class="fs-1">.fs-1</p>
<p class="fs-2">.fs-2</p>
<p class="fs-4">.fs-4</p>
<p class="fs-5">.fs-5</p>
<p class="fs-6">.fs-6</p>
<p class="fs-7">.fs-7</p>
<p class="fs-8">.fs-8</p>
Display Headings
Traditional heading elements are designed to work best in the meat of your page content
Display 1
Display 2
Display 3
Display 4
<h2 class="display-1">Display 1</h2>
<h2 class="display-2">Display 2</h2>
<h2 class="display-3">Display 3</h2>
<h2 class="display-4">Display 4 </h2>
Left Alignment
<div class="text-start">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
<div class="text-end">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
<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
<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>
Transformation
<div class="text-lowercase">Lowercased text</div>
<div class="text-uppercase">Uppercased text</div>
<div class="text-capitalize">Capitalized text</div>
Blockquotes
Racing is life, everything before or after is just waiting.”
<blockquote class="blockquote">
<p class="fs-2 text-800 fst-italic">Racing is life, everything before or after is just waiting.”</p>
<footer class="blockquote-footer">Frank Zappa </footer>
</blockquote>
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>
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.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- 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 ps-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>