Sizing Utilities

Alongside margin and padding, Bootstrap 4 provides a small set of percentage-based width and height utilities. They're deliberately limited — five width steps, five height steps, plus two max-size helpers — but that's usually enough to avoid a custom stylesheet entirely for simple sizing needs like a TrailMap trail photo that should always fill its container without overflowing it.

Width Utilities: .w-25, .w-50, .w-75, .w-100, .w-auto

Each class sets width to a percentage of the element's containing block: 25%, 50%, 75%, or 100%. .w-auto resets width back to the browser default.

<!-- TrailMap: a difficulty meter bar filled to 75% -->
<div class="bg-light">
  <div class="bg-warning w-75" style="height: 6px;"></div>
</div>

Height Utilities: .h-25, .h-50, .h-75, .h-100, .h-auto

The height classes mirror the width classes exactly, setting height as a percentage of the parent's height. They're most useful once the parent has an explicit height set — a percentage height against an auto-height parent just collapses to nothing.

<div class="d-flex" style="height: 200px;">
  <img src="trail-thumb.jpg" class="h-100" alt="Blue Ridge Overlook thumbnail">
</div>

Max-Width and Max-Height: .mw-100 and .mh-100

.mw-100 sets max-width: 100% — the element can shrink below its parent's width but will never grow past it, which is exactly the behavior you want for images and media that shouldn't overflow their container. .mh-100 is the same idea for max-height.

<div style="width: 300px;">
  <img src="wide-trail-photo.jpg" class="mw-100" alt="Panoramic trail photo">
</div>

Worked Example: A Responsive TrailMap Trail Photo

Bootstrap 4's own .img-fluid class already sets max-width: 100% and height: auto, which handles most responsive-image needs on its own. Combine it with a sizing utility when you want the photo to also cap out at a fraction of a wider layout, like the hero photo on a trail detail page:

<div class="col-md-8">
  <img src="blue-ridge-overlook.jpg"
       class="img-fluid w-100"
       alt="View from Blue Ridge Overlook">
</div>

.img-fluid keeps the photo from ever overflowing its column, and .w-100 makes sure it stretches to fill that column's full width on every screen size rather than sitting at its natural pixel size.

Up next: Sizing controls how big an element is — Display & Visibility Utilities controls whether it shows up at all.