Sizing

Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.

Size Relative to parent

Preview
HTML

Width

.w-25 25%

.w-50 50%

.w-75 75%

.w-100 100%

Height

.h-25

.h-50

.h-75

.h-100

.h-auto

Order Classes

.mw-100 (max-width: 100%)
.mh-100 (max-height: 100%)

Custom Classes

.min-w-auto (min-width: auto)
.min-w-100 (min-width: 100%)
.min-w-75 (min-width: 75%)
.min-w-50 (min-width: 50%)
.min-w-25 (min-width: 25%)

.max-w-auto (max-width: auto)
.max-w-100 (max-width: 100%)
.max-w-75 (max-width: 75%)
.max-w-50 (max-width: 50%)
.max-w-25 (max-width: 25%)

.min-vw-100 (min-width: 100vw)
.min-vw-75 (min-width: 75vw)
.min-vw-50 (min-width: 50vw)
.min-vw-25 (min-width: 25vw)

.max-vw-100 (max-width: 100vw)
.max-vw-75 (max-width: 75vw)
.max-vw-50 (max-width: 50vw)
.max-vw-25 (max-width: 25vw)

.min-h-auto (min-height: auto)
.min-h-100 (min-height: 100%)
.min-h-75 (min-height: 75%)
.min-h-50 (min-height: 50%)
.min-h-25 (min-height: 25%)

.max-h-100 (max-height: 100%)
.max-h-75 (max-height: 75%)
.max-h-50 (max-height: 50%)
.max-h-25 (max-height: 25%)

.min-vh-100 (min-height: 100vh)
.min-vh-75 (min-height: 75vh)
.min-vh-50 (min-height: 50vh)
.min-vh-25 (min-height: 25vh)

.max-vh-100 (max-height: 100vh)
.max-vh-75 (max-height: 75vh)
.max-vh-50 (max-height: 50vh)
.max-vh-25 (max-height: 25vh)

                
                  <!-- Width -->
                  <div class="w-25 p-2 bg-gray-200">25%</div>
                  <div class="w-50 p-2 bg-gray-200">50%</div>
                  <div class="w-75 p-2 bg-gray-200">75%</div>
                  <div class="w-100 p-2 bg-gray-200">100%</div>

                  <!-- Height -->
                  <div class="h-25 p-2 bg-gray-200">25%</div>
                  <div class="h-50 p-2 bg-gray-200">50%</div>
                  <div class="h-75 p-2 bg-gray-200">75%</div>
                  <div class="h-100 p-2 bg-gray-200">100%</div>

Size Relative to viewport

            
              <!-- Bootstrap Classes -->
              <div class="min-vw-100">Min-width 100vw</div>
              <div class="min-vh-100">Min-height 100vh</div>
              <div class="vw-100">Width 100vw</div>
              <div class="vh-100">Height 100vh</div>

              <!-- Theme Classes -->
              <div class="max-vw-100">Max-width 100vw</div>
              <div class="max-vw-75">Max-width 75vw</div>
              <div class="max-vw-50">Max-width 50vw</div>
              <div class="max-vw-25">Max-width 25vw</div>

              <div class="max-vh-100">Max-height 100vw</div>
              <div class="max-vh-75">Max-height 75vw</div>
              <div class="max-vh-50">Max-height 50vw</div>
              <div class="max-vh-25">Max-height 25vw</div>