Sizing Utilities

Sizing utilities let you set an element's width and height as a percentage of its parent, straight from the class attribute. They're a natural pair with responsive images: on a TrailMap trail photo you often want the image to fill its column, never overflow it, and shrink gracefully on small screens — all three of those are one class each.

Note on this site: Codingwithsonu.com itself is built with Bootstrap 3. This track teaches Bootstrap 5 as its own independent subject — the two don't mix.

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

Each class sets width as a percentage of the containing element. .w-auto resets width back to the browser default (width: auto).

<div class="w-25 bg-light">w-25 — 25% width</div>
<div class="w-50 bg-light">w-50 — 50% width</div>
<div class="w-75 bg-light">w-75 — 75% width</div>
<div class="w-100 bg-light">w-100 — 100% width</div>

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

The height classes mirror the width ones exactly, setting height instead. They're handy for making equal-height columns fill a flex or grid row.

<!-- Two trail photo columns, each stretched to the same full height -->
<div class="d-flex">
  <div class="h-100 me-2">
    <img src="blue-ridge-loop.jpg" class="h-100" style="object-fit:cover;" alt="Blue Ridge Loop">
  </div>
  <div class="h-100">
    <img src="cedar-falls.jpg" class="h-100" style="object-fit:cover;" alt="Cedar Falls">
  </div>
</div>

Capping Size: .mw-100 and .mh-100

.mw-100 sets max-width: 100% and .mh-100 sets max-height: 100%. Unlike .w-100, these don't force the element to that size — they only stop it from growing past its parent, which is exactly what you want for images and embeds that shouldn't overflow their container.

<div class="card" style="width: 300px;">
  <!-- If the source image is 1200px wide, mw-100 shrinks it to fit the 300px card -->
  <img src="blue-ridge-loop.jpg" class="mw-100" alt="Blue Ridge Loop">
</div>
Note: .mw-100 and .mh-100 use logical CSS properties under the hood the same way .ms-*/.me-* do for margins — the percentage is always measured against the parent, so nesting behaves predictably.

.img-fluid: The Standard Way to Make an Image Responsive

.img-fluid is really just shorthand: it applies max-width: 100% and height: auto together, which is the correct combination for a responsive image that scales down but never up. It's the class you'll reach for on almost every content image.

<img src="cedar-falls.jpg" class="img-fluid" alt="Cedar Falls trailhead">

Worked Example: A TrailMap Responsive Trail Photo

Combining .img-fluid with a width utility on the wrapping column gives full control over how large the photo can get, while still guaranteeing it never overflows on a phone:

<div class="row">
  <div class="col-md-8">
    <img src="blue-ridge-loop.jpg" class="img-fluid rounded" alt="Blue Ridge Loop overlook">
  </div>
  <div class="col-md-4">
    <h5>Blue Ridge Loop</h5>
    <p class="text-muted">8.2 km · Moderate</p>
    <!-- w-100 on the button makes it fill the narrow sidebar column -->
    <a href="#" class="btn btn-primary w-100">View Trail</a>
  </div>
</div>
Next up: Sizing controls how big an element is; Display & Visibility Utilities controls whether it shows up at all, and on which screen sizes.