BootstrapHow-ToBeginner · 4 min read

How to Use Sizing Utilities in Bootstrap for Responsive Design

Bootstrap sizing utilities let you quickly set the width and height of elements using classes like w-25 for 25% width or h-100 for 100% height. You apply these classes directly to HTML elements to control their size responsively without writing custom CSS.

📐

Syntax

Bootstrap sizing utilities use classes with a pattern to set width and height. The pattern is:

w-{value} for width
h-{value} for height

Where {value} can be a percentage (like 25, 50, 75, 100), or keywords like auto.

html

<div class="w-50 bg-primary text-white p-2">Width 50%</div>
<div class="h-25 bg-success text-white p-2 mt-2" style="height: 100px;">Height 25%</div>

Output

Two colored boxes: the first is half the container's width with blue background and white text 'Width 50%'; the second is a box with height 25% of its 100px container's height with green background and white text 'Height 25%'.

💻

Example

This example shows how to use width and height utilities to size boxes inside a container. The boxes have different widths and heights using Bootstrap classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Sizing Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      color: white;
      padding: 1rem;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <div class="box bg-primary w-25">Width 25%</div>
    <div class="box bg-secondary w-50">Width 50%</div>
    <div class="box bg-success h-50" style="height: 100px;">Height 50% (of 100px container)</div>
    <div class="box bg-danger w-auto">Width auto</div>
  </div>
</body>
</html>

Output

A page with four colored boxes stacked vertically: a blue box 25% wide, a gray box 50% wide, a green box with height half of 100px container, and a red box with automatic width.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap sizing utilities include:

Using sizing classes without a parent container that defines size, so percentages have no reference.
Mixing inline styles with sizing classes causing unexpected results.
For height utilities, the parent container must have a defined height for percentage heights to work.

Always ensure the container has a size context for percentage-based sizing to work properly.

html

<!-- Wrong: height 50% with no parent height -->
<div class="bg-warning h-50">This box may collapse because parent has no height.</div>

<!-- Right: parent has height set -->
<div style="height: 200px;">
  <div class="bg-info h-50">This box is 50% height of 200px parent.</div>
</div>

Output

First yellow box may have zero height or collapse; second blue box is half the height of its 200px tall parent container.

📊

Quick Reference

Class	Effect
w-25	Sets width to 25%
w-50	Sets width to 50%
w-75	Sets width to 75%
w-100	Sets width to 100%
w-auto	Width adjusts to content
h-25	Sets height to 25%
h-50	Sets height to 50%
h-75	Sets height to 75%
h-100	Sets height to 100%
h-auto	Height adjusts to content

✅

Key Takeaways

Use w- and h- classes to quickly set width and height in Bootstrap.

Percentage sizing requires the parent container to have a defined size for correct rendering.

Use w-auto or h-auto to let size adjust to content naturally.

Avoid mixing inline styles with sizing utilities to prevent conflicts.

Sizing utilities help create responsive layouts without writing custom CSS.