Relative to the parent

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

              
                <div class="w-25">Width 25%</div>
                <div class="w-50">Width 50%</div>
                <div class="w-60">Width 60%</div>
                <div class="w-75">Width 75%</div>
                <div class="w-85">Width 85%</div>
                <div class="w-100">Width 100%</div>
                <div class="w-auto">Width auto</div>
              
            

              
                <div class="h-25">Height 25%</div>
                <div class="h-50">Height 50%</div>
                <div class="h-60">Height 60%</div>
                <div class="h-75">Height 75%</div>
                <div class="h-85">Height 85%</div>
                <div class="h-100">Height 100%</div>
                <div class="h-auto">Height auto</div>
              
            

You can also use max-width: 100%;, min-height: 100%; and max-height: 100%; utilities as needed.

              
                <div class="mw-100">Max-width: 100%</div>
              
            

              
                <div class="mh-100">Max-height: 100%</div>
              
            

              
                <div class="min-h-100">Min-height: 100%</div>
              
            

Relative to the viewport

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