Sizing
Easily make an element as wide or as tall with our width and height utilities.
Width in percentage
Set a height of an element in percentage instantly by using the following width utility classes.
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
<div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
<div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
<div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
<div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
| Class | Values |
|---|---|
class="w-[value]"
class="w-sm-[value]"
class="w-md-[value]"
class="w-lg-[value]"
class="w-xl-[value]"
class="w-xxl-[value]"
|
5 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 ... / 100 (step of 5) |
class="w-auto" |
Set the width to auto |
class="mw-100" |
Set max-width of an element to 100% |
Fixed width
Set a width of an element in pixels instantly by using the following width utility classes.
75px
100px
150px
<div class="w-75p p-2 mb-1 bg-grey-light-4">75px</div>
<div class="w-100p p-2 mb-1 bg-grey-light-4">100px</div>
<div class="w-150p p-2 mb-1 bg-grey-light-4">150px</div>
| Class | Values |
|---|---|
class="w-[value]p"
class="w-sm-[value]p"
class="w-md-[value]p"
class="w-lg-[value]p"
class="w-xl-[value]p"
class="w-xxl-[value]p"
|
25 / 30 / 35 / 40 / 45 / 50 ... / 800 (step of 5) |
class="mw-[value]p" |
25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set max-width of an element |
class="mnw-[value]p" |
25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set min-width of an element |
Height in percentage
Set a height of an element in percentage instantly by using the following height utility classes.
auto
25%
50%
75%
100%
<div class="h-auto p-2 bg-grey-light-4" >auto</div>
<div class="h-25 p-2 bg-grey-light-4">25%</div>
<div class="h-50 p-2 bg-grey-light-4">50%</div>
<div class="h-75 p-2 bg-grey-light-4">75%</div>
<div class="h-100 p-2 bg-grey-light-4">100%</div>
| Class | Values |
|---|---|
class="h-[value]" |
25 / 30 / 35 / 40 / 45 / 50 ... / 100 (step of 5) |
class="h-auto" |
Set the height to auto |
class="mh-100" |
Set max-height of an element to 100% |
Fixed height
Set a height of an element in pixels instantly by using the following height utility classes.
50px
75px
100px
150px
<div class="h-50p p-2 bg-grey-light-4" >50px</div>
<div class="h-75p p-2 bg-grey-light-4">75px</div>
<div class="h-100p p-2 bg-grey-light-4">100px</div>
<div class="h-150p p-2 bg-grey-light-4">150px</div>
| Class | Values |
|---|---|
class="h-[value]p" |
25 / 30 / 35 / 40 / 45 / 50 ... / 800 (step of 5) |
class="mh-[value]p" |
100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set max-height of an element |
class="mnh-[value]p" |
100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set min-height of an element |
Equal Height & Width
Easily make an element of equal height & width using the following utility classes.
d-8
d-10
d-16
<div class="d-8 bg-grey-light-4"><div class="d-flex justify-content-center align-items-center h-100 w-100">d-8</div></div>
<div class="d-10 bg-grey-light-4"><div class="d-flex justify-content-center align-items-center h-100 w-100">d-10</div></div>
<div class="d-16 bg-grey-light-4"><div class="d-flex justify-content-center align-items-center h-100 w-100">d-16</div></div>
| Class | Values |
|---|---|
class="d-[value]" |
1 / 2 / 3 ... / 6 (step of .25rem)
7 / 8 / 9 ... / 12 (step of .5rem)
16 / 17 / 18 / 19 / 20 (step of 1rem)
|