Sizing utilities

Relative to the parent #

The width of an element can be set relative to the parent using the following classes:

• .w-{value}
• .w-{breakpoint}-{value}

The height of an element can be set relative to the parent using the following classes:

• .h-{value}
• .h-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

These classes are shown in action in the examples below.

<!-- Width 25% -->
<div class="w-25">
  ...
</div>

<!-- Width 50% -->
<div class="w-50">
  ...
</div>

<!-- Width 75% -->
<div class="w-75">
  ...
</div>

<!-- Width 100% -->
<div class="w-100">
  ...
</div>

<!-- Width auto -->
<div class="w-auto">
  ...
</div>

<!-- Height 25% -->
<div class="h-25">
  ...
</div>

<!-- Height 50% -->
<div class="h-50">
  ...
</div>

<!-- Height 75% -->
<div class="h-75">
  ...
</div>

<!-- Height 100% -->
<div class="h-100">
  ...
</div>

<!-- Height auto -->
<div class="h-auto">
  ...
</div>

Max width and height #

The max-width and max-height of an element can be set to 100% using the following classes:

• mw-100 / mw-{breakpoint}-100 — sets max-width: 100%
• mh-100 / mh-{breakpoint}-100 — sets max-height: 100%

Relative to the viewport #

The following classes are also available for setting the width and height of an element relative to the viewport (as opposed to the parent):

• min-vw-100 / min-vw-{breakpoint}-100 — sets min-width: 100vw
• min-vh-100 / min-vh-{breakpoint}-100 — sets min-height: 100vh
• vw-100 / vw-{breakpoint}-100 — sets width: 100vw
• vh-100 / vh-{breakpoint}-100 — sets height: 100vh

Specific width and height #

The width of an element can be set to a specific size using the following classes:

• .specific-w-{value}
• .specific-w-{breakpoint}-{size}

The height of an element can be set to a specific size using the following classes:

• .specific-h-{value}
• .specific-h-{breakpoint}-{size}

The {size} can be one of the following:

These classes can be used to set the sizes of elements to very specific values, and as a result, they can come in handy in quite a few common scenarios.

<!-- Specific width and height -->
<div class="specific-w-150 specific-h-100">
  150 × 100
</div>