Fixedsizing
Apply .w-{size}pxor .h-{size}pxto 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-50pxapplies width: 50pxto 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 |
Percentagesizing
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% |
Fullscreensizing
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 |