Width
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
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div class="bg-primary text-white p-3 h-25">Width 25%</div> <div class="bg-primary text-white p-3 h-50">Width 50%</div> <div class="bg-primary text-white p-3 h-75">Width 75%</div> <div class="bg-primary text-white p-3 h-100">Width 100%</div> <div class="bg-primary text-white p-3 h-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>