What is Sizing utilities (width, height) in Bootsrap?

Bootsrapmarkup~5 mins

Sizing utilities (width, height) in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Sizing utilities help you quickly set the width and height of elements without writing custom CSS.

You want to make an image exactly half the width of its container.

You need a button to have a fixed height for consistent design.

You want a div to fill the full width of the screen.

You want to limit the height of a card to avoid overflow.

You want to quickly adjust sizes during responsive design.

Syntax

Bootsrap

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

// {value} can be:
// 25, 50, 75, 100 (percentages)
// auto

Use w- classes to set width and h- classes to set height.

Values like 25, 50, 75, and 100 represent percentages.

Examples

This div will take half the width of its parent container.

Bootsrap

<div class="w-50">This div is 50% wide</div>

The image height will be 25% of its parent container's height.

Bootsrap

<img src="image.jpg" class="h-25" alt="Sample image">

This div fills the full width and height of its parent.

Bootsrap

<div class="w-100 h-100">Full width and height</div>

The width will automatically adjust to fit the content inside.

Bootsrap

<div class="w-auto">Width adjusts to content</div>

Sample Program

This example shows boxes with different width and height percentages using Bootstrap sizing utilities. The boxes have a blue background and white text for clear visibility.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sizing Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      background-color: #0d6efd;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <main class="container mt-4" style="height: 100vh;">
    <h1>Sizing Utilities (width, height)</h1>
    <div class="box w-25 h-25">25% width & height</div>
    <div class="box w-50 h-50">50% width & height</div>
    <div class="box w-75 h-75">75% width & height</div>
    <div style="height: 200px;">
      <div class="box w-100 h-100">100% width & height (200px height set on parent)</div>
    </div>
    <div class="box w-auto" style="height: 50px;">Width auto, height 50px</div>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Remember that height percentages depend on the parent's height being set.

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

Combine sizing utilities with responsive classes like w-sm-50 for different screen sizes.

Summary

Sizing utilities let you quickly set width and height using simple classes.

Use w- for width and h- for height with percentage or viewport values.

They help keep your design consistent and responsive without writing CSS.