Sizing

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.

Min width utility classes

              
                <div class="min-w-3rem">.min-w-3rem</div>
                <div class="min-w-4rem">.min-w-4rem</div>
                <div class="min-w-8rem">.min-w-8rem</div>
                <div class="min-w-21rem">.min-w-21rem</div>

Max width utility classes

              
                <div class="max-w-3rem">.max-w-3rem</div>
                <div class="max-w-4rem">.max-w-4rem</div>
                <div class="max-w-5rem">.max-w-5rem</div>
                <div class="max-w-6rem">.max-w-6rem</div>
                <div class="max-w-7rem">.max-w-7rem</div>
                <div class="max-w-8rem">.max-w-8rem</div>
                <div class="max-w-9rem">.max-w-9rem</div>
                <div class="max-w-10rem">.max-w-10rem</div>
                <div class="max-w-11rem">.max-w-11rem</div>
                <div class="max-w-13rem">.max-w-13rem</div>
                <div class="max-w-15rem">.max-w-15rem</div>
                <div class="max-w-19rem">.max-w-19rem</div>
                <div class="max-w-23rem">.max-w-23rem</div>
                <div class="max-w-27rem">.max-w-27rem</div>
                <div class="max-w-33rem">.max-w-33rem</div>
                <div class="max-w-35rem">.max-w-35rem</div>
                <div class="max-w-40rem">.max-w-40rem</div>
                <div class="max-w-50rem">.max-w-50rem</div>

Height utility classes

              
                <div class="h-4rem">.h-4rem</div>
                <div class="h-250rem">.h-250rem</div>
                <div class="h-380rem">.h-380rem</div>

Min height classes

              
                <div class="min-h-270rem">.min-h-270rem</div>
                <div class="min-h-300rem">.min-h-300rem</div>
                <div class="min-h-380rem">.min-h-380rem</div>
                <div class="min-h-450rem">.min-h-450rem</div>
                <div class="min-h-500rem">.min-h-500rem</div>
                <div class="min-h-620rem">.min-h-620rem</div>

Height responsive classes

Medium devices (tablets, 768px and up)

                
                  <div class="vh-md-30">.vh-md-30</div>
                  <div class="vh-md-70">.vh-md-70</div>
                  <div class="min-vh-md-100">.min-vh-md-100</div>

Large devices (desktops, 992px and up)

                
                  <div class="vh-lg-100">.vh-lg-100</div>
                  <div class="min-vh-lg-100">.min-vh-lg-100</div>
                  <div class="min-h-lg-600rem">.min-h-lg-600rem</div>