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