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-2gap-xgap-x-4Gap 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-9font-size-12font-size-16font-size-20Lead
Add .lead-{size} to any element, where {size} can be any integer between 1 to 9.
lead-1lead-3lead-5lead-6Small
Add .small-{size} to any element, where {size} can be any integer between 1 to 9.
small-1small-3small-5small-6Font 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.
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-300font-weight-400font-weight-600font-weight-700Line 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.
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.
Shadow
Add a box shadow to an element using .shadow-* and .hover-shadow-* classes.
shadow-1shadow-2shadow-3shadow-4shadow-5shadow-6shadow-7shadow-8shadow-9Hover shadow
hover-shadow-1hover-shadow-2hover-shadow-3hover-shadow-4hover-shadow-5hover-shadow-6hover-shadow-7hover-shadow-8hover-shadow-9