Width & height

Sizing


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

Fixed sizing

Apply .w-{size} or .h-{size} to any element (except inline elements) to set the width or height of the element to {size}px. Available sizes are:

  • 0, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • 10, 20, 30, 40, 50, 60, 70, 80, 90
  • 50, 150, 250, 350, 450
  • 120, 140, 160, 180
  • 25, 50, 75

For example, .w-50 applies width: 50px to the element.



Percentage sizing

Width percentage sizing

Class name Description
.w-full width: 100%
.w-half width: 50%
.w-third width: 33.333333%
.w-fourth width: 25%
.w-fifth width: 20%

Height percentage sizing

Class name Description
.h-full height: 100%
.h-half height: 50%
.h-third height: 33.333333%
.h-fourth height: 25%
.h-fifth height: 20%


Fullscreen sizing

These classes makes size of the element as equal as the browser size.

Class name Description
.w-fullscreen width: 100vw
.h-fullscreen height: 100vh
Padding & margin

Spacing


Give any padding or margin to your element, or even make gap between items.

Padding and margin

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. It uses Bootstrap 4 spacing format of {property}{sides}-{size}. Available sizes can be any of:

  • 4, 8, 12, 16, 20, 24
  • 5, 10, 15, 20, 25, 30, 35, 40, 45, 50
  • 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • 120, 140, 160, 180, 200
  • 100, 150, 200, 250, 300, 400, 500

Padding classes
Class name Description
.pt-4 padding-top: 4px
.pb-4 padding-bottom: 4px
.pl-4 padding-left: 4px
.pr-4 padding-right: 4px
.px-4 padding-left: 4px
padding-right: 4px
.py-4 padding-top: 4px
padding-bottom: 4px
.p-4 padding: 4px

Margin classes
Class name Description
.mt-4 margin-top: 4px
.mb-4 margin-bottom: 4px
.ml-4 margin-left: 4px
.mr-4 margin-right: 4px
.mx-4 margin-left: 4px
margin-right: 4px
.my-4 margin-top: 4px
margin-bottom: 4px
.m-4 margin: 4px



Gap classes
Gap items

These classes apply to a parent and make a horizontal gap between all immediate children by giving them margin-left and margin-right property.

Class name Gap size
.gap-items-1 4px
.gap-items-2 8px
.gap-items-3 or .gap-items 16px
.gap-items-4 24px
.gap-items-5 32px

Gap multiline items

These classes apply to a parent and make a horizontal and vertical gap between all immediate children by giving them margin property. These classes are meant to be use for parent that have a lot of children which break horizontal line and need space in vertical direction as well.

Class name Gap size
.gap-multiline-items-1 4px
.gap-multiline-items-2 8px
.gap-multiline-items-3 or .gap-multiline-items 16px
.gap-multiline-items-4 24px
.gap-multiline-items-5 32px
Font & line

Typography


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

Font size

Apply .fs-{size} to any element, where {size} can be any of:

  • 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
  • 10, 20, 30, 40, 50, 60, 70, 80, 90
  • 10, 15, 20, 25, 30, 35, 40, 45, 50
  • 22, 24, 26, 28


Font weight

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



Line height

Apply .lh-{size} to any element, where {size} can be any of:

  • 0, 1, 2, 3, 4, 5
  • 15, 25, 35, 45
  • 11, 12, 13, 14, 15, 16, 17, 18, 19
  • 22, 24, 26, 28

To better understanding of values, take a look at class definition of some of them:

  • .lh-1 { line-height: 1; }
  • .lh-15 { line-height: 1.5; }
  • .lh-24 { line-height: 2.4; }


Letter spacing

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

Background, text & border

Color


Change background color or text color of an element with a class.

Background

.bg-* can apply to any element, where * is a color name.

.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-dark

.bg-pale-* can apply to any element, where * is a color name.

.bg-pale-primary .bg-pale-secondary .bg-pale-success .bg-pale-info .bg-pale-warning .bg-pale-danger .bg-pale-dark

Some other fade colors are available for background-color.

.bg-white .bg-transparent .bg-light .bg-lighter .bg-lightest



Text

.text-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.

.text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-dark .text-mute .text-light .text-lighter .text-fade .text-white



Border

.border-* can apply to any element, where * is a color name.

Default color .border-primary .border-secondary .border-success .border-info .border-warning .border-danger .border-dark .border-white .border-light .border-transparent
bg-img & overlay

Background image


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

Background image

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



Overlays

Add a alpha colored layer between your background-image and element text for better contrast.

Elements using a background image can be overlayed with a dark layer by adding the data attribute data-overlay="*", where * is a number between 1 and 9; 1 is lighter layer and 9 is darker layer.

You might also need to have a light overlay. For this purpose, user data-overlay-light="*" instead of data-overlay="*".

Size

Border


Add border to any side of an element. Easily change its size and color.

The classes follows b{side}-{size} format, where {size} is one of 0, 1, 2, or 3 values. Also, {side} is one of:

  • t: Border top
  • b: Border bottom
  • l: Border left
  • r: Border right
  • x: Border left and right
  • y: Border top and bottom
  • null: All sides

Following table demonstrates available classes for 1px border.

Class name Description
.bt-1 border-top: 1px solid ...
.bb-1 border-bottom: 1px solid ...
.bl-1 border-left: 1px solid ...
.br-1 border-right: 1px solid ...
.bx-1 border-left: 1px solid ...
border-right: 1px solid ...
.by-1 border-top: 1px solid ...
border-bottom: 1px solid ...
.b-1 border: 1px solid ...
Multimedia

No Maker


This classes are to remove effect of a property by reverse its value or set it back to its default value.

Class name Description
.no-shadow shadow: none
.no-text-shadow text-shadow: none
.no-scroll overflow: hidden
.no-shrink flex-shrink: 0
.no-grow flex-shrink: 0
.no-letter-spacing letter-spacing: 0
.no-underline text-decoration: none on :hover and :focus