Sizing

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

Width classes

Width and height utilities are generated from the $sizes Sass map in assets/include/scss/vendor/bootstrap/_custom.bootstrap.variables.scss. Includes support for responsive .{parameter}-{breakpoint}-{value} for sm, md, lg, and xl classes. Modify those values as you need to generate different utilities here.

Width 15%
Width 20%
Width 25%
Width 30%
Width 35%
Width 40%
Width 50%
Width 60%
Width 65%
Width 75%
Width 80%
Width 85%
Width 100%
                  
                    <div class="w-15 bg-secondary text-white p-3 mb-1">Width 15%</div>
                    <div class="w-20 bg-secondary text-white p-3 mb-1">Width 20%</div>
                    <div class="w-25 bg-secondary text-white p-3 mb-1">Width 25%</div>
                    <div class="w-30 bg-secondary text-white p-3 mb-1">Width 30%</div>
                    <div class="w-35 bg-secondary text-white p-3 mb-1">Width 35%</div>
                    <div class="w-40 bg-secondary text-white p-3 mb-1">Width 40%</div>
                    <div class="w-50 bg-secondary text-white p-3 mb-1">Width 50%</div>
                    <div class="w-60 bg-secondary text-white p-3 mb-1">Width 60%</div>
                    <div class="w-60 bg-secondary text-white p-3 mb-1">Width 65%</div>
                    <div class="w-75 bg-secondary text-white p-3 mb-1">Width 75%</div>
                    <div class="w-80 bg-secondary text-white p-3 mb-1">Width 80%</div>
                    <div class="w-80 bg-secondary text-white p-3 mb-1">Width 85%</div>
                    <div class="w-100 bg-secondary text-white p-3 mb-1">Width 100%</div>

You can also use max-width: 100%; utility as needed.

Max-width 100% 
                  
                    <img class="mw-100" src="../assets/img/img3.jpg" alt="Max-width 100%" />

Min-width classes

Min-width 3
Min-width 4
                  
                    <div class="min-width-4 bg-secondary text-white p-3 mb-1">Min-width 4</div>

Max-width classes

Max-width 3
Max-width 4
Max-width 5
Max-width 6
Max-width 8
Max-width 9
Max-width 10
Max-width 11
Max-width 15
Max-width 19
Max-width 23
Max-width 27
Max-width 35
Max-width 40
Max-width 50
Max-width 60
                  
                    <div class="max-width-3 bg-secondary text-white p-3 mb-1">Max-width 3</div>
                    <div class="max-width-4 bg-secondary text-white p-3 mb-1">Max-width 4</div>
                    <div class="max-width-5 bg-secondary text-white p-3 mb-1">Max-width 5</div>
                    <div class="max-width-6 bg-secondary text-white p-3 mb-1">Max-width 6</div>
                    <div class="max-width-8 bg-secondary text-white p-3 mb-1">Max-width 8</div>
                    <div class="max-width-9 bg-secondary text-white p-3 mb-1">Max-width 9</div>
                    <div class="max-width-10 bg-secondary text-white p-3 mb-1">Max-width 10</div>
                    <div class="max-width-11 bg-secondary text-white p-3 mb-1">Max-width 11</div>
                    <div class="max-width-15 bg-secondary text-white p-3 mb-1">Max-width 15</div>
                    <div class="max-width-19 bg-secondary text-white p-3 mb-1">Max-width 19</div>
                    <div class="max-width-23 bg-secondary text-white p-3 mb-1">Max-width 23</div>
                    <div class="max-width-27 bg-secondary text-white p-3 mb-1">Max-width 27</div>
                    <div class="max-width-35 bg-secondary text-white p-3 mb-1">Max-width 35</div>
                    <div class="max-width-40 bg-secondary text-white p-3 mb-1">Max-width 40</div>
                    <div class="max-width-50 bg-secondary text-white p-3 mb-1">Max-width 50</div>
                    <div class="max-width-60 bg-secondary text-white p-3 mb-1">Max-width 60</div>

Height classes

Height 15%
Height 25%
Height 30%
Height 35%
Height 40%
Height 50%
Height 60%
Height 65%
Height 75%
Height 80%
Height 85%
Height 100%
                  
                    <div style="height: 300px;">
                      <div class="h-15 d-inline-block bg-primary text-white" style="width: 65px;">Height 15%</div>
                      <div class="h-25 d-inline-block bg-primary text-white" style="width: 65px;">Height 25%</div>
                      <div class="h-30 d-inline-block bg-primary text-white" style="width: 65px;">Height 30%</div>
                      <div class="h-35 d-inline-block bg-primary text-white" style="width: 65px;">Height 35%</div>
                      <div class="h-40 d-inline-block bg-primary text-white" style="width: 65px;">Height 40%</div>
                      <div class="h-50 d-inline-block bg-primary text-white" style="width: 65px;">Height 50%</div>
                      <div class="h-60 d-inline-block bg-primary text-white" style="width: 65px;">Height 60%</div>
                      <div class="h-60 d-inline-block bg-primary text-white" style="width: 65px;">Height 65%</div>
                      <div class="h-75 d-inline-block bg-primary text-white" style="width: 65px;">Height 75%</div>
                      <div class="h-80 d-inline-block bg-primary text-white" style="width: 65px;">Height 80%</div>
                      <div class="h-80 d-inline-block bg-primary text-white" style="width: 65px;">Height 85%</div>
                      <div class="h-100 d-inline-block bg-primary text-white" style="width: 65px;">Height 100%</div>
                    </div>

You can also use max-height: 100%; utility as needed.

Max-height 100%
                  
                    <div class="mh-100 bg-primary text-white" style="width: 100px; height: 200px;">Max-height 100%</div>

Viewport height classes 

            
              <div class="height-40vh">.height-40vh</div>
              <div class="height-60vh">.height-60vh</div>
              <div class="height-100vh">.height-100vh</div>

Height utility classes 

            
              <div class="height-4">.height-4</div>
              <div class="height-250">.height-250</div>
              <div class="height-380">.height-380</div>
              <div class="height-400">.height-400</div>
              <div class="height-450">.height-450</div>

Min height classes 

            
              <div class="min-height-155">.min-height-155</div>
              <div class="min-height-300">.min-height-300</div>
              <div class="min-height-380">.min-height-380</div>
              <div class="min-height-450">.min-height-450</div>
              <div class="min-height-550">.min-height-550</div>
              <div class="min-height-600">.min-height-600</div>
              <div class="min-height-620">.min-height-620</div>

Height responsive classes

Small devices (tablets, 576px and up)

              
                <div class="height-sm-100vh">.height-sm-100vh</div>

Medium devices (tablets, 768px and up)

              
                <div class="height-md-60vh">.height-md-60vh</div>
                <div class="height-md-100vh">.height-md-100vh</div>
                <div class="min-height-md-100vh">.min-height-md-100vh</div>

Large devices (desktops, 992px and up)

            
              <div class="height-lg-100vh">.height-lg-100vh</div>
              <div class="min-height-lg-auto">.min-height-lg-auto</div>
              <div class="min-height-lg-100vh">.min-height-lg-100vh</div>

Extra large devices (desktops, 1200px and up)

            
              <div class="height-xl-100vh">.height-xl-100vh</div>