Height

You can set custom height for blocks.
Available sizes: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

.h-40
.h-100
<div class="h-40">height: 40px;</div>
<div class="mh-100">max-height: 100px;</div>

Width

You can set custom width for blocks.
Available sizes: 0, 10, 20, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 360, 380, 400.
To set width 100% use this classname .fluid-width.

.w-40
.w-120
.fluid-width
<div class="w-40">width: 40px;</div>
<div class="w-120">width: 120px;</div>
<div class="fluid-width">width: 100%;</div>
You can set custom max-width or min-width for blocks.
Available sizes: 0, 10, 20, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 240, 280, 320, 360, 400, 450, 500, 550, 600, 700, 800, 900, 1000, 1100, 1200.
<div class="mw-500">max-width: 500px;</div>
<div class="mw-1200">max-width: 1200px;</div>
<div class="mnw-200">min-width: 200px;</div>
<div class="mnw-400">min-width: 400px;</div>

Font Weight

You can set custom font weight for blocks.
Available sizes: 100, 200, 300, 400, 500, 600, 700, 800, 900.

weight 100
weight 400
weight 700
weight 900
<div class="fw-100">font-weight: 100;</div>
<div class="fw-400">font-weight: 400;</div>
<div class="fw-700">font-weight: 700;</div>
<div class="fw-900">font-weight: 900;</div>

Font Size

You can set custom font size for blocks.
Available sizes: 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.

size 5
size 10
size 15
size 20
<div class="fs-5">font-size: 5px;</div>
<div class="fs-10">font-size: 10px;</div>
<div class="fs-15">font-size: 15px;</div>
<div class="fs-20">font-size: 20px;</div>

Line Height

You can set custom line height for blocks.
Available sizes: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.
<div class="lh-20">line-height: 20px;</div>

Padding

You can set custom padding for blocks.
Available paddings:Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.
.p-10
.pl-10
.pt-10
.pr-10
.pb-10
<div class="p-10">padding: 10px;</div>
<div class="pl-10">padding-left: 10px;</div>
<div class="pt-10">padding-top: 10px;</div>
<div class="pr-10">padding-right: 10px;</div>
<div class="pb-10">padding-bottom: 10px;</div>

Margin

You can set custom margin for blocks.

Available margins:Available negative margins:Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.
.m-10
.ml-10
.mt-10
.mr-10
.mb-10
<div class="m-10">margin: 10px;</div>
<div class="ml-10">margin-left: 10px;</div>
<div class="mt-10">margin-top: 10px;</div>
<div class="mr-10">margin-right: 10px;</div>
<div class="mb-10">margin-bottom: 10px;</div>

Border Radius

You can set custom border radius for blocks.
Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 25, 30, 35.

.br-5
.br-18
.br-35
<div class="br-5">border-radius: 5px;</div>
<div class="br-18">border-radius: 18px;</div>
<div class="br-35">border-radius: 35px;</div>

Overflow

You can set overflow.
  • overflow: auto - .of-a
  • overflow: hidden - .of-h
  • overflow: visible - .of-v
  • overflow-x: auto - .of-x-a
  • overflow-x: hidden - .of-x-h
  • overflow-x: visible - .of-x-v
  • overflow-y: auto - .of-y-a
  • overflow-y: hidden - .of-y-h
  • overflow-y: visible - .of-y-v
<div class="of-a">overflow: auto;</div>
<div class="of-h">overflow: hidden;</div>
<div class="of-v">overflow: visible;</div>
<div class="of-x-a">overflow-x: auto;</div>
<div class="of-x-h">overflow-x: hidden;</div>
<div class="of-x-v">overflow-x: visible;</div>
<div class="of-y-a">overflow-y: auto;</div>
<div class="of-y-h">overflow-y: hidden;</div>
<div class="of-y-v">overflow-y: visible;</div>

Vertical Align

This should be vertically aligned
<div class="valign-wrapper">
  <h5 class="valign">This should be vertically aligned</h5>
</div>

Text Align

These classes are for horizontally aligning content. We have .left-align, .right-align and .center-align
This should be left aligned
This should be right aligned
This should be center aligned
<div>
  <h5 class="left-align">This should be left aligned</h5>
</div>
<div>
  <h5 class="right-align">This should be right aligned</h5>
</div>
<div>
  <h5 class="center-align">This should be center aligned</h5>
</div>

Quick Floats

Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues.
<div class="left">...</div>
<div class="right">...</div>

Hiding Content

Screen Range
.hideHidden for all Devices
.hide-on-small-onlyHidden for Mobile Only
.hide-on-med-onlyHidden for Tablet Only
.hide-on-med-and-downHidden for Tablet and Below
.hide-on-med-and-upHidden for Tablet and Above
.hide-on-large-onlyHidden for Desktop Only
<div class="hide-on-small-only"></div>

Other

Text Uppercase
.text-uppercase

uppercase example
<span class="text-uppercase">uppercase example</span>
Cursor Pointer
.cursor

Hover Over Me!
<span class="cursor">Hover Over Me!</span>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv