Bootstrap - sizing utilities

 In Bootstrap, sizing utilities like .w-* and .h-* are helper classes used to quickly set the width and height of an element without writing custom CSS. They are very handy for responsive layouts and small tweaks. Let’s break it down:

1. Width utilities (.w-*)

Bootstrap provides classes to set the width of an element as a percentage of its parent or to auto. Common classes:

Class Effect
.w-25 Width: 25%
.w-50 Width: 50%
.w-75 Width: 75%
.w-100 Width: 100%
.w-auto Width: auto (based on content)

Example:

<div class="w-50 bg-primary text-white p-2">50% width</div>
<div class="w-100 bg-success text-white p-2">100% width</div>

2. Height utilities (.h-*)

Similarly, for height:

Class Effect
.h-25 Height: 25% of parent
.h-50 Height: 50% of parent
.h-75 Height: 75% of parent
.h-100 Height: 100% of parent
.h-auto Height: auto (based on content)

Example:

<div class="h-50 bg-warning text-white">50% height</div>
<div class="h-100 bg-danger text-white">100% height</div>

3. Notes

  • Percentages (25, 50, 75, 100) are relative to the parent element.

  • .auto lets the element size naturally based on content.

  • Can be combined with other utilities like p-* (padding), m-* (margin), d-* (display), etc.

  • Works well with flexbox and grid layouts for responsive design.