Sizing

The .w-* and .h-* classes ar used to set the width and of a certain element to a defined size. There are also specific classes for setting minimum and maximum sizes in relation to the parent element, or the viewport size.

The .w-* class is used to set the width of a certain element to a defined size. This is available by default in four sizes: 25%, 50%, 75% and 100% by using values 25, 50, 75, 100. Additionally, there's the class .w-auto that allows an element to scale automatically.

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

The .h-* class is used to set the height of a certain element to a defined size. This is available by default in four sizes: 25%, 50%, 75% and 100% by using values 25, 50, 75, 100. Additionally, there's the class .h-auto that allows an element to scale automatically.

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

The .mw-100 class is used to set the max-width of a certain element to 100% of the parent element.

    <div class=class="container">
        <div class=class="w-100" style="width: 200%">Width 100%</div>
    </div>

The .mh-100 class is used to set the max-height of a certain element to 100% of the parent element.

    <div class=class="container" style="height: 120px">
        <div class=class="w-100" style="height: 200%">Height 100%</div>
    </div>

There are also variations of the sizing utilities using the width, min-width, height and min-height relative to the viewport size. These use the following syntax:

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