Sizing


Change width and height of an element with a bunch of available classes.

Percentage sizing

Add .w-{size} or .h-{size} to an element to change width or height respectively; where {size} can be any integer among 0, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100.


Pixel sizing

Since the numbers less and equal to 100 is used for percentage sizing by default, we have two different class names for pixel sizing.

Above 100 pixel

Add .w-{size} or .h-{size} to an element to change width or height respectively; where {size} can be any integer among 125, 150, 175, 200, 250, 300, 350, 400, 500, 600, 700, 800, 900.

Below 101 pixel

Add .w-{size}px or .h-{size}px to an element to change width or height respectively; where {size} can be any 5x integer between 5 and 100. So, .w-20px is equals to width: 20px;


Extra classes

Here's the list of other classes and equivalent css code.

Class name CSS code
.w-auto width: auto;
.h-auto height: auto;
.w-fullscreen width: 100vw;
.h-fullscreen height: 100vh;
.mw-fullscreen min-width: 100vw;
.mh-fullscreen min-height: 100vh;

Spacing


Make a gap between items of a parent element.

Gap horizontally

These classes apply to a parent and make a horizontal gap between all immediate children by giving them margin-left and margin-right property. Simply add .gap-x-{size} to the parent, where {size} can be an integer number between 1 to 7. Please note that .gap-x is equals to .gap-x-3.

gap-x-2
gap-x
gap-x-4

Gap horizontally and vertically

These classes apply to a parent and make a horizontal and vertical gap between all immediate children by giving them margin property. This classes are the best choice to elements with several children which might fall into two or more lines. Simply add .gap-xy-{size} to the parent, where {size} can be an integer number between 1 to 7. Please note that .gap-x is equals to .gap-xy-3.

Typography


The following utilities can be used to add additional styles to texts.

Font size

We have three types of classes which can change font size of an element.

Pixel size

Add .font-size-{size} or .fs-{size} to any element, where {size} can be any integer between 6 to 20.

font-size-9
font-size: 9px;
font-size-12
font-size: 12px;
font-size-16
font-size: 16px;
font-size-20
font-size: 20px;
Lead

Add .lead-{size} to any element, where {size} can be any integer between 1 to 9.

lead-1
Lead font size - 1
lead-3
Lead font size - 3
lead-5
Lead font size - 5
lead-6
Lead font size - 6
Small

Add .small-{size} to any element, where {size} can be any integer between 1 to 9.

small-1
Small font size - 1
small-3
Small font size - 3
small-5
Small font size - 5
small-6
Small font size - 6

Font family

We have .font-body and .font-title classes to set font family of your element to the base font family and title font family respectively.

Also, you can use data-font="{font-family}:{font-weight}" on an element to use any of Google fonts in your typography. Following is some examples of using data-font.


Oswald:700
Macondo:400
Roboto+Slab:100

Font weight

Add .font-weight-{value} or .fw-{value} to any element, where {value} can be any of: 100, 200, 300, 400, 500, 600, 700, 800, 900.

font-weight-300
font-weight: 300;
font-weight-400
font-weight: 400;
font-weight-600
font-weight: 600;
font-weight-700
font-weight: 700;

Line height

Add .line-height-{size} or .lh-{size} to any element, where {size} can be any integer between 1 to 9.


Letter spacing

Add .letter-spacing-{size} or .ls-{size} to any element, where {size} can be any of: 0, 1, 2, 3, 4, 5.

Border


Add border to any side of an element and change border radius.

Add border

You can add a 1px border to any side of an element using .border-{side}-1 where {side} can be any value among left | top | right | bottom. The shorthand class is .b{side}-1 where {side} can be a value among l | t | r | b.


Border radius

The following example displays the available classes for modifying border radius of an element.


rounded
rounded-md
rounded-lg
rounded-xl

Background image


Easily set a background image for a block, modify its behavior and position.

These classes help you to attach an image to background of an element. Image can be set using inline css and background-image property.

You should apply .bg-img to your desire element. Then, you can modify the image behavior using following utility classes, or draw an overlay above it.

Class name Description
.bg-fixed background-attachment: fixed
.bg-repeat background-repeat: repeat
.bg-img-left background-position: left center
.bg-img-right background-position: right center
.bg-img-top background-position: center top
.bg-img-bottom background-position: center bottom

Opacity


Change the opacity of an element with a single class.

Add .opacity-{value} to an element, where {value} can be a 5x integer value between 0 to 100.


opacity-15
opacity-40
opacity-65
opacity-80

Shadow


Add a box shadow to an element using .shadow-* and .hover-shadow-* classes.

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
shadow-6
shadow-7
shadow-8
shadow-9
Hover shadow
hover-shadow-1
hover-shadow-2
hover-shadow-3
hover-shadow-4
hover-shadow-5
hover-shadow-6
hover-shadow-7
hover-shadow-8
hover-shadow-9