Relative to the parent

Width and height utilities are generated from the $sizes Sass map in _utilities.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-35">Width 35%</div>
          <div class="w-50">Width 50%</div>
          <div class="w-65">Width 65%</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-75">Height 75%</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-vw-sm-100">Min-width 100vh</div>
          <div class="min-vh-sm-100">Min-height 100vh</div>

          <div class="min-vw-md-100">Min-width 100vh</div>
          <div class="min-vh-md-100">Min-height 100vh</div>

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

          <div class="min-vw-xl-100">Min-width 100vh</div>
          <div class="min-vh-xl-100">Min-height 100vh</div>

          <div class="vw-100">Width 100vh</div>

          <div class="vh-30">Height 30vh</div>
          <div class="vh-50">Height 50vh</div>
          <div class="vh-70">Height 70vh</div>
          <div class="vh-100">Height 100vh</div>

          <div class="vh-sm-30">Height 30vh</div>
          <div class="vh-sm-50">Height 50vh</div>
          <div class="vh-sm-70">Height 70vh</div>
          <div class="vh-sm-100">Height 100vh</div>

          <div class="vh-md-30">Height 30vh</div>
          <div class="vh-md-50">Height 50vh</div>
          <div class="vh-md-70">Height 70vh</div>
          <div class="vh-md-100">Height 100vh</div>

          <div class="vh-lg-30">Height 30vh</div>
          <div class="vh-lg-50">Height 50vh</div>
          <div class="vh-lg-70">Height 70vh</div>
          <div class="vh-lg-100">Height 100vh</div>

          <div class="vh-xl-30">Height 30vh</div>
          <div class="vh-xl-50">Height 50vh</div>
          <div class="vh-xl-70">Height 70vh</div>
          <div class="vh-xl-100">Height 100vh</div>