Sizing

width and height

.w

.h

-25

-50

-75

-100

-auto

max-width and max-height

.mw-100

.mh-100

Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here. Use like this .w-25, .h-50 and so on.

This:

<div class="w-25 p-01 example">Width 25%</div>
<div class="w-50 p-01 example">Width 50%</div>
<div class="w-75 p-01 example">Width 75%</div>
<div class="w-100 p-01 example">Width 100%</div>
<div class="w-auto p-01 example">Width auto</div>

…will result to this:

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

There is also max-width classes:

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }