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 |