Sizing utilities (width, height) in Bootsrap

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>

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.

Practice

1. Which Bootstrap class sets an element's width to 50% of its parent container?

easy

A. w-50

B. h-50

C. w-100

D. h-100

Solution

1. Step 1: Understand width and height prefixes

   Bootstrap uses w- for width and h- for height classes.

2. Step 2: Identify the class for 50% width

   The class w-50 sets width to 50%, while h-50 sets height to 50%.

3. Final Answer:

   <code>w-50</code> -> Option A

4. Quick Check:

   Width 50% = w-50 [OK]

Hint: Width classes start with w-, height with h- [OK]

Common Mistakes:

• Confusing width (w-) with height (h-)
• Using w-100 instead of w-50
• Assuming h-50 sets width

2. Which of the following is the correct Bootstrap class to set an element's height to 100% of the viewport height?

easy

A. h-vh-100

B. h-100

C. h-100vh

D. vh-100

Solution

1. Step 1: Recall Bootstrap height classes

   Bootstrap uses h-100 to set height to 100% of the parent container.

2. Step 2: Viewport height in Bootstrap

   Bootstrap does not have a class vh-100 to set height to 100vh. To set height to viewport height, custom CSS or utility classes are needed.

3. Final Answer:

   <code>h-100</code> -> Option B

4. Quick Check:

   Height 100% of parent = h-100 [OK]

Hint: Use h-100 for height 100% of parent [OK]

Common Mistakes:

• Using h-vh-100 or h-100vh which are invalid
• Assuming vh-100 is a Bootstrap class
• Confusing viewport height with parent height

3. What will be the width of the <div class='w-75'></div> element relative to its parent container?

medium

A. 25% of the parent container

B. 50% of the parent container

C. 100% of the parent container

D. 75% of the parent container

Solution

1. Step 1: Understand the meaning of w-75

   The class w-75 sets the element's width to 75% of its parent container.

2. Step 2: Compare options with the class effect

   Only 75% of the parent container correctly states 75% width relative to the parent.

3. Final Answer:

   75% of the parent container -> Option D

4. Quick Check:

   w-75 means width 75% [OK]

Hint: Class w-XX means width XX% [OK]

Common Mistakes:

• Mixing up 75% with 25%
• Thinking w-75 means height
• Assuming w-75 means 100% width

4. You want to set an element's height to 25% using Bootstrap classes, but your code <div class='w-25'></div> does not work as expected. What is the error?

medium

A. Using width class w-25 instead of height class h-25

B. Missing a custom CSS for height

C. Bootstrap does not support height utilities

D. Class w-25 sets height, so no error

Solution

1. Step 1: Identify the class used

   The class w-25 sets width to 25%, not height.

2. Step 2: Correct the class for height

   To set height to 25%, use h-25 instead of w-25.

3. Final Answer:

   Using width class w-25 instead of height class h-25 -> Option A

4. Quick Check:

   Height needs h-25, not w-25 [OK]

Hint: Use h-XX for height, w-XX for width [OK]

Common Mistakes:

• Confusing width and height classes
• Assuming w-25 affects height
• Thinking Bootstrap lacks height utilities

5. You want a responsive box that is 100% wide on small screens but only 50% wide on medium and larger screens using Bootstrap sizing utilities. Which class combination achieves this?

hard

A. h-100 w-md-50

B. w-50 w-md-100

C. w-100 w-md-50

D. w-100 h-md-50

Solution

1. Step 1: Understand responsive sizing classes

   Bootstrap uses breakpoint prefixes like md to apply styles at medium screen sizes and above.

2. Step 2: Choose classes for width at different breakpoints

   w-100 sets width 100% on all screens, but w-md-50 overrides width to 50% on medium and larger screens.

3. Step 3: Verify other options

   Options B, C, and D either reverse the sizes or mix height and width incorrectly.

4. Final Answer:

   <code>w-100 w-md-50</code> -> Option C

5. Quick Check:

   Responsive width: w-100 then w-md-50 [OK]

Hint: Use breakpoint prefixes like w-md-50 for responsive widths [OK]

Common Mistakes:

• Mixing height and width classes
• Reversing breakpoint order
• Not using breakpoint prefixes for responsiveness