Bootstrap Fundamentals — Sizing, Borders and Shadows #6

Width

These classes set the width of the div to % of the parent container.

• Width 25%: A green box with 25% width of its parent container
• Width 50%: A green box with 50% width of its parent container
• Width 75%: A green box with 75% width of its parent container
• Width 100%: A green box with 100% width of its parent container
• Width Auto: A green box with a width that adjusts automatically based on its content

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

Width

Height

These classes set the height to % of the parent container’s height.

• Height 25%: A blue box with a height of 75px
• Height 50%: A blue box with a height of 150px
• Height 75%: A blue box with a…