Sizing Utility
Easily make an element as wide or as tall with our width and height utilities.
Set a Width
These utility classes allow to set width of an element instantly.
25%
50%
75%
100%
| Percent Width | Value |
|---|---|
.w-{value} | 15 | 20 | 25 | 30 | ... | 85 | 90 | 95 | 100 (step of 5) |
| Use-case Width | Value |
|---|---|
.wide-{value} | xs | sm | md | lg | xl |
These classes mostly used with .container to specific width on any larger screens. | |
| Specific Width | Value |
|---|---|
.w-{value} | 80px | 90px | 100px | 110px | 120px | 125px | 130px | 140px | 150px | 175px | 200px | 220px | 225px | 250px | 300px | 350px | 400px | 550px |
.w-max-{value} | Same as above |
.w-min-{value} | Same as above |
| Full Width | Value | |
|---|---|---|
.w-{value} | auto | 100 | auto use for reset |
.w-max-{value} | auto | 100 | auto use for reset |
.w-min-{value} | auto | 100 | auto use for reset |
.mw-100 | Same as .w-max-100 |
Uses Example
<div class="w-25"> ... </div><div class="w-max-250px"> ... </div><div class="w-min-100px"> ... </div>
Set a Height
These utility classes allow to set width of an element instantly.
25%
50%
75%
100%
| Percent Height | Value |
|---|---|
.h-{value} | 25 | 50 | 75 | 100 | auto |
.mh-100 | Set max height 100% |
| Specific Height | Value |
|---|---|
.h-{value} | 100px | 150px | 175px | 200px | 225px | 250px | 275px | 300px | 325px | 350px | 375px | 400px | 425px | 450px | 475px | 500px |
.h-max-{value} | Same as above |
.h-min-{value} | Same as above |
Uses Example
<div class="h-25"> ... </div><div class="h-250px"> ... </div><div class="h-min-325px"> ... </div>
Relative to the viewport
You can also use utilities to set the width and height relative to the viewport.
| Class Reference | Details |
|---|---|
.vh-100 | Height set 100vh |
.vw-100 | Width set 100vw |
.min-vh-100 | Height set min 100vh |
.min-vw-100 | Width set min 100vw |
Uses Example
<div class="vh-100"> ... </div>
