Sizing

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

Width

Width utilities are support for 25%, 50%, 75%, and 100% by default.

Width 25%

Width 50%

Width 75%

Width 100%


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

Max-width

You can also use max-with utilities as needed: .mw-25, .mw-50, .mw-75, .mw-100.

Max width 75%


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

Height

height utilities are support for 25%, 50%, 75%, and 100% by default.

Height 25%

Height 50%

Height 75%

Height 100%


                    <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>

Max-height

You can also use max-height utilities as needed: .mh-25, .mh-50, .mh-75, .mh-100.

Max height 75%


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

Responsive

All sizing utilities classes has media variants with breakpoints suffixes: -sm, -md, -lg, -xl, -xxl.