Fixed sizing
Apply .w-{size}px or .h-{size}px 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-50px applies width: 50px to the element.
Width examples
| Class name | Description |
|---|---|
.w-0px |
width: 0 |
.w-10px |
width: 10px |
.w-20px |
width: 20px |
.w-{*}px |
width: {*}px |
Height examples
| Class name | Description |
|---|---|
.h-0px |
height: 0 |
.h-10px |
height: 10px |
.h-20px |
height: 20px |
.h-{*}px |
height: {*}px |
Percentage sizing
Same as fixed sizing, you have classes to set width and height in percentage.
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 |
.min-w-fullscreen |
min-width: 100vw |
.min-h-fullscreen |
min-height: 100vh |