# Utility

Vibrance Framework contains a collection of easy-to-use utility classes for applying various styles.

## Width

Quickly apply a width to a container using ```.width-*``` classes.

| Class | Description |
| ------ | ------- |
| ```.width-100```| Applies 100% width. |
| ```.width-90``` | Applies 90% width. |
| ```.width-80``` | Applies 80% width. |
| ```.width-70``` | Applies 70% width. |
| ```.width-60``` | Applies 60% width. |
| ```.width-50``` | Applies 50% width. |
| ```.width-40``` | Applies 40% width. |
| ```.width-30``` | Applies 30% width. |
| ```.width-20``` | Applies 20% width. |
| ```.width-10``` | Applies 10% width. |

You can also apply a width to a specific screen size using ```width-xs-*```, ```width-sm-*```, ```width-md-*```, ```width-lg-*```, ```width-xl-*```, prefixes.

## Height

To apply a relative height to the height of the initial container block, add the ```.height-*``` class.

| Class | Description |
| ------ | ------- |
| ```.height-100```| Applies 100% viewport height. |
| ```.height-90``` | Applies 90% viewport height. |
| ```.height-80``` | Applies 80% viewport height. |
| ```.height-70``` | Applies 70% viewport height. |
| ```.height-60``` | Applies 60% viewport height. |
| ```.height-50``` | Applies 50% viewport height. |
| ```.height-40``` | Applies 40% viewport height. |
| ```.height-30``` | Applies 30% viewport height. |
| ```.height-20``` | Applies 20% viewport height. |
| ```.height-10``` | Applies 10% viewport height. |

## Display

Apply the classes in the table below to change the CSS display property of an element.

| Class | Description |
| ------ | ------- |
| ```.inline-block```| Applies the inline-block CSS property. |
| ```.display-block``` | Applies 90% viewport height. |
| ```.display-inline``` | Applies 80% viewport height. |

## Content alignment

The classes in the table below are used to align text.

| Class | Description |
| ------ | ------- |
| ```.text-left``` | Applies the inline-block CSS property. |
| ```.text-center``` | Applies 90% viewport height. |
| ```.text-right``` | Applies 80% viewport height. |

If you want to align any type of content, use the ```.center-all``` class.

## Floating

Apply the classes in the table below to change the CSS float property of an element.

| Class | Description |
| ------ | ------- |
| ```.left```| Applies the float CSS property to left. |
| ```.right``` | Applies the float CSS property to right. |

## Hide

Apply the classes in the table below to hide an element depending on the size of the screen.

| Class | Description |
| ------ | ------- |
| ```.hide```| Hide on all devices. |
| ```.hide-xs``` | Hide on mobile only. |
| ```.hide-sm``` | Hide on tablet only. |
| ```.hide-sm-down``` | Hide on tablet and below. |
| ```.hide-sm-up``` | Hide on tablet and above. |
| ```.hide-md``` | Hide on medium screen only. |
| ```.hide-md-down``` | Hide on medium screen and below. |
| ```.hide-md-up``` | Hide on medium screen and above. |
| ```.hide-lg``` | Hide on large screen only. |

## Show

Apply the classes in the table below to show an element depending on the size of the screen.

| Class | Description |
| ------ | ------- |
| ```.show```| Show on all devices. |
| ```.show-xs``` | Show on mobile only. |
| ```.show-sm``` | Show on tablet only. |
| ```.show-sm-down``` | Show on tablet and below. |
| ```.show-sm-up``` | Show on tablet and above. |
| ```.show-md``` | Show on medium screen only. |
| ```.show-md-down``` | Show on medium screen and below. |
| ```.show-md-up``` | Show on medium screen and above. |
| ```.show-lg``` | Show on large screen only. |

## Margin

The classes in the table below apply a margin at the top and bottom of the element. If the element is the first child of the parent element, the top margin is not applied.

| Class | Description |
| ------ | ------- |
| ```.margin-off```| Applies a margin of 0. |
| ```.margin```, ```.margin-small```, ```.margin-10``` | Applies margin of 10px. |
| ```.margin-20``` | Applies margin of 20px. |
| ```.margin-30``` | Applies margin of 30px. |
| ```.margin-40``` | Applies margin of 40px. |
| ```.margin-50```, ```.margin-medium``` | Applies margin of 50px. |
| ```.margin-60``` | Applies margin of 60px. |
| ```.margin-70``` | Applies margin of 70px. |
| ```.margin-80``` | Applies margin of 80px. |
| ```.margin-90``` | Applies margin of 90px. |
| ```.margin-100```, ```.margin-large``` | Applies margin of 100px. |

!!!Note
    You can also apply a margin on only one side of the element with the ```.margin-top-*```, ```.margin-bottom-*```, ```.margin-left-*```, and ```.margin-right-*``` classes.

## Padding

The classes in the table below apply a padding at the top and bottom of the element. If the element is the first child of the parent element, the top padding is not applied.

| Class | Description |
| ------ | ------- |
| ```.padding-off```| Applies padding of 0. |
| ```.padding```, ```.padding-small```, ```.padding-10``` | Applies padding of 10px. |
| ```.padding-20``` | Applies padding of 20px. |
| ```.padding-30``` | Applies padding of 30px. |
| ```.padding-40``` | Applies padding of 40px. |
| ```.padding-50```, ```.padding-medium``` | Applies padding of 50px. |
| ```.padding-60``` | Applies padding of 60px. |
| ```.padding-70``` | Applies padding of 70px. |
| ```.padding-80``` | Applies padding of 80px. |
| ```.padding-90``` | Applies padding of 90px. |
| ```.padding-100```, ```.padding-large``` | Applies padding of 100px. |

!!!Note
    You can also apply a padding on only one side of the element with the ```.padding-top-*```, ```.padding-bottom-*```, ```.padding-left-*```, and ```.padding-right-*``` classes.

## Position

Apply the classes in the table below to change the position of an element.

| Class | Description |
| ------ | ------- |
| ```.position-left```| Place the element to the rigleftht. |
| ```.position-right```| Place the element to the right. |
| ```.position-center-left```| Place the element to the center left. |
| ```.position-center```| Place the element to the center. |
| ```.position-center-right```| Place the element to the center right. |
| ```.position-top```| Place the element to the top. |
| ```.position-top-left```| Place the element to the top left. |
| ```.position-top-center```| Place the element to the top center. |
| ```.position-top-right```| Place the element to the top right. |
| ```.position-bottom```| Place the element to the bottom. |
| ```.position-bottom-left```| Place the element to the bottom left. |
| ```.position-bottom-center```| Place the element to the bottom center. |
| ```.position-bottom-right```| Place the element to the bottom right. |