Relative to the parent
Width and height utilities include support for 25%, 50%, 75%, 100%, and auto by default.
Width 25%
Width 33%
Width 50%
Width 66%
Width 75%
Width 100%
Width auto
<div class="w-25 p-15">Width 25%</div>
<div class="w-33 p-15">Width 33%</div>
<div class="w-50 p-15">Width 50%</div>
<div class="w-66 p-15">Width 66%</div>
<div class="w-75 p-15">Width 75%</div>
<div class="w-100 p-15">Width 100%</div>
<div class="w-auto p-15">Width auto</div>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div style="height: 100px;">
<div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>
You can also use max-width: 100%; and max-height: 100%; utilities as needed.
Max-width 100%
<div style="width: 50%; height: 100px;">
<div class="mw-100" style="width: 200%;">Max-width 100%</div>
</div>
Max-height 100%
Max-height fit-content
<div style="height: 100px;">
<div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>
<div style="height: 100px;">
<div class="mh-flexible" style="width: 100px;">Max-height fit-content</div>
</div>
