Sizing

A quck way of setting widths and heights of 25%, 50%, 75%, 100% and auto.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

<div class="bg-primary text-white p-3 w-25">Width 25%</div>
<div class="bg-primary text-white p-3 w-50">Width 50%</div>
<div class="bg-primary text-white p-3 w-75">Width 75%</div>
<div class="bg-primary text-white p-3 w-100">Width 100%</div>
<div class="bg-primary text-white p-3 w-auto">Width auto</div>

Height 25%
Height 50%
Height 75%
Height 100%
Height auto

<div class="bg-primary text-white p-3 w-25">Width 25%</div>
<div class="bg-primary text-white p-3 w-50">Width 50%</div>
<div class="bg-primary text-white p-3 w-75">Width 75%</div>
<div class="bg-primary text-white p-3 w-100">Width 100%</div>
<div class="bg-primary text-white p-3 w-auto">Width auto</div>

Max-height and max-width

You can set the max height and max width to 100% as easy.

Max-height 100%
Max-width 100%

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

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

Sizing relative to viewport

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