Utilities - Sizing

Width & Height

Assign responsive-friendly height, min-height, max-height, width, min-withand max-widthvalues to an element with shorthand classes. The classes are named using the format {property}-{size}for xsand {property}-{breakpoint}-{size}for sm, md, lg, xl, and xxl.

Where propertyis one of:

h- for classes that set height
mh- for classes that set max height
min-h- for classes that set min height
w- for classes that set width
mw- for classes that set max width
min-w- for classes that set min width

Where sizedefined with $custom-sizesvariable in sass/_variables.scssis one of-

25- for 25%
50- for 50%
75- for 75%
100- for 100%
auto- for auto
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
15px
20px
25px
30px
35px
40px
45px
50px
55px
60px
65px
70px
75px
80px
85px
90px
95px
100px
125px
150px
175px
200px
225px
250px
275px
300px
325px
350px
375px
400px
425px
450px
475px
500px
550px
600px
650px
700px
750px
800px
850px
900px
950px
1000px

w-100px
h-100px

w-150px
h-150px

w-200px
h-200px

w-250px
h-250px

min-w-100px
min-h-100px
mw-100px
mh-100px

min-w-150px
min-h-150px
mw-150px
mh-150px

min-w-200px
min-h-200px
mw-200px
mh-200px

min-w-250px
min-h-250px
mw-250px
mh-250px

<div class="w-100px h-100px"></div>
<div class="w-150px h-150px"></div>
<div class="w-200px h-200px"></div>
<div class="w-250px h-250px"></div>
<div class="min-w-100px min-h-100px mw-100px mh-100px"></div>
<div class="min-w-150px min-h-150px mw-150px mh-150px"></div>
<div class="min-w-200px min-h-200px mw-200px mh-200px"></div>
<div class="min-w-250px min-h-250px mw-250px mh-250px"></div>