Sizing
Easily make an element as wide or as tall with our width and height utilities.
Relative to the parent
| Class name | Preview |
|---|---|
.w-25 |
Width 25%
|
.w-50 |
Width 50%
|
.w-75 |
Width 75%
|
.w-100 |
Width 100%
|
.w-auto |
Width auto
|
Fixed sizes
| Class name | Preview |
|---|---|
.w-100px |
Width 100px
|
.w-160px |
Width 160px
|
.w-200px |
Width 200px
|
.w-250px |
Width 250px
|
.w-300px |
Width 300px
|
.w-350px |
Width 350px
|
.w-400px |
Width 400px
|
.w-450px |
Width 450px
|
Fixed-size classes can also be applied to specific breakpoints. Here's an example:
.w-md-400px
.w-lg-300px
.w-xl-160px
Height
| Class name | Preview |
|---|---|
.h-25 |
Height 25%
|
.h-50 |
Height 50%
|
.h-75 |
Height 75%
|
| Class name | Preview |
|---|---|
.h-100 |
Height 100%
|
.h-auto |
Height auto
|
Min and Max
| Class name | Preview |
|---|---|
.mw-100 |
Max-width 100%
|
.mh-100 |
Max-height 100%
|
| Class name | Preview |
|---|---|
.min-w-0 |
Min-width 0
|
.min-h-0 |
Min-height 0
|
Relative to the viewport
<div class="min-vw-100">Min-width 100vw</div> <div class="min-vh-100">Min-height 100vh</div> <div class="vw-100">Width 100vh</div> <div class="vh-100">Height 100vh</div>
| Class name | Preview |
|---|---|
.min-vw-100 |
Min-width 100vw
|
.min-vh-100 |
Min-height 100vh
|
| Class name | Preview |
|---|---|
.min-w-0 |
Min-width 0
|
.min-h-0 |
Min-height 0
|
