Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Sizing Utilities in Bootstrap 5

Sizing Utilities: Quickly set width and height of elements with relative, viewport, and fixed size classes.

Width Utilities

Width Classes (w-*)

Relative Widths

25%

.w-25

50%

.w-50

75%

.w-75

100%

.w-100

Auto

.w-auto

Fixed Widths

100px

.w-100px (custom)

200px

.w-200px (custom)

Max width 100% prevents overflow of this very long text content

.mw-100

50vw

.vw-50 (custom)

Min Width

Min 100px

.minw-100 (custom)

Max Width

Max 50% of parent

.mw-50

Responsive Width

Responsive

.w-100 .w-md-50 .w-lg-25

<!-- Width utilities -->
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="w-auto">Width auto</div>

<!-- Max-width utilities -->
<div class="mw-100">Max-width 100%</div>
<div class="mw-50">Max-width 50%</div>
<div class="mw-75">Max-width 75%</div>
<div class="mw-25">Max-width 25%</div>

<!-- Viewport width (custom classes) -->
<div class="vw-100">Width 100vw</div>
<div class="vw-50">Width 50vw</div>
<div class="vw-25">Width 25vw</div>

<!-- Fixed pixel widths (custom classes) -->
<div class="w-100px">Width 100px</div>
<div class="w-200px">Width 200px</div>
<div class="w-300px">Width 300px</div>

<!-- Min-width (custom classes) -->
<div class="minw-100">Min-width 100px</div>
<div class="minw-200">Min-width 200px</div>
<div class="minw-300">Min-width 300px</div>

<!-- Responsive width -->
<div class="w-100 w-md-50 w-lg-25">
  <!-- 100% on mobile, 50% on tablet, 25% on desktop -->
</div>

<div class="w-75 w-md-100 w-lg-50">
  <!-- 75% on mobile, 100% on tablet, 50% on desktop -->
</div>

<!-- Auto margins with width -->
<div class="w-50 mx-auto">Centered 50% width</div>
<div class="w-75 ms-auto">75% width aligned right</div>

<!-- Inline elements -->
<span class="w-25 d-inline-block">Inline block with width</span>
<img src="image.jpg" class="w-100" alt="Full width image">

<!-- Form elements -->
<input type="text" class="form-control w-50" placeholder="50% width input">
<select class="form-select w-75">
  <option>75% width select</option>
</select>

<!-- Buttons -->
<button class="btn btn-primary w-100">Full width button</button>
<button class="btn btn-success w-50">Half width button</button>

Height Utilities

Height Classes (h-*)

Relative Heights

25%

.h-25

50%

.h-50

75%

.h-75

100%

.h-100

Fixed Heights

50px

.h-50px (custom)

100px

.h-100px (custom)

Max height 50px (overflow hidden)

.mh-50

25vh

.vh-25 (custom)

Min Height

Min 100px

.minh-100 (custom)

Viewport Height

50% viewport height

.vh-50 (custom)

Responsive Height

Responsive

.h-25 .h-md-50 .h-lg-75

<!-- Height utilities -->
<div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>
<div class="h-auto">Height auto</div>

<!-- Max-height utilities -->
<div class="mh-100">Max-height 100%</div>
<div class="mh-50">Max-height 50%</div>
<div class="mh-75">Max-height 75%</div>
<div class="mh-25">Max-height 25%</div>

<!-- Viewport height (custom classes) -->
<div class="vh-100">Height 100vh</div>
<div class="vh-50">Height 50vh</div>
<div class="vh-25">Height 25vh</div>
<div class="vh-75">Height 75vh</div>

<!-- Fixed pixel heights (custom classes) -->
<div class="h-50px">Height 50px</div>
<div class="h-100px">Height 100px</div>
<div class="h-200px">Height 200px</div>
<div class="h-300px">Height 300px</div>

<!-- Min-height (custom classes) -->
<div class="minh-100">Min-height 100px</div>
<div class="minh-200">Min-height 200px</div>
<div class="minh-300">Min-height 300px</div>

<!-- Responsive height -->
<div class="h-25 h-md-50 h-lg-75">
  <!-- 25% on mobile, 50% on tablet, 75% on desktop -->
</div>

<div class="h-100 h-md-75 h-lg-50">
  <!-- 100% on mobile, 75% on tablet, 50% on desktop -->
</div>

<!-- Full viewport height layouts -->
<div class="min-vh-100 d-flex flex-column">
  <header>Header</header>
  <main class="flex-grow-1">Main content</main>
  <footer>Footer</footer>
</div>

<!-- Scrollable containers -->
<div class="h-100 overflow-auto">
  <!-- Full height with scrolling -->
</div>

<div class="mh-100 overflow-auto">
  <!-- Max height with scrolling -->
</div>

<!-- Equal height columns -->
<div class="row">
  <div class="col h-100">Column 1</div>
  <div class="col h-100">Column 2</div>
</div>

<!-- Form elements -->
<textarea class="form-control h-100px" placeholder="100px height"></textarea>
<div class="form-control h-200px overflow-auto">Scrollable content area</div>

<!-- Images -->
<img src="image.jpg" class="h-100 w-100 object-fit-cover" alt="Cover image">

Viewport Sizing

Viewport Width & Height

Min Viewport Height

.min-vh-50

At least 50% of viewport height

Viewport Width

.vw-75 - 75% of viewport width

.vw-50 - 50% of viewport width

Full Viewport

.min-vh-100

Full viewport height

Responsive Viewport

.min-vh-50 .min-vh-md-75 .min-vh-lg-100

Viewport Size Table

Class	Value	Description
`.min-vh-100`	100vh	Full viewport height
`.vh-100`	100vh	100% viewport height
`.vw-100`	100vw	100% viewport width
`.min-vw-100`	100vw	Min 100% viewport width
`.vw-50`	50vw	50% viewport width
`.vh-50`	50vh	50% viewport height

<!-- Viewport sizing utilities -->
<div class="min-vh-100">Minimum 100% viewport height</div>
<div class="vh-100">100% viewport height</div>
<div class="vw-100">100% viewport width</div>
<div class="min-vw-100">Minimum 100% viewport width</div>

<!-- Percentage viewport sizes -->
<div class="vh-50">50% viewport height</div>
<div class="vh-75">75% viewport height</div>
<div class="vw-50">50% viewport width</div>
<div class="vw-75">75% viewport width</div>
<div class="vw-25">25% viewport width</div>

<!-- Responsive viewport sizing -->
<div class="min-vh-100 min-vh-md-75 min-vh-lg-50">
  <!-- 
    100vh on mobile
    75vh on tablet
    50vh on desktop
  -->
</div>

<div class="vw-100 vw-md-75 vw-lg-50">
  <!-- 
    100vw on mobile
    75vw on tablet
    50vw on desktop
  -->
</div>

<!-- Full-page layouts -->
<div class="min-vh-100 d-flex flex-column">
  <!-- Full viewport height layout -->
</div>

<!-- Hero sections -->
<div class="min-vh-100 d-flex align-items-center justify-content-center">
  <!-- Full-screen hero section -->
</div>

<!-- Sidebar + content layout -->
<div class="min-vh-100 d-flex">
  <aside class="w-25">Sidebar</aside>
  <main class="flex-grow-1">Main content</main>
</div>

<!-- Modal backdrops -->
<div class="position-fixed top-0 start-0 vw-100 vh-100 bg-dark bg-opacity-50">
  <!-- Full-screen overlay -->
</div>

<!-- Centered content -->
<div class="min-vh-100 d-flex align-items-center justify-content-center">
  <div class="w-50 vh-50 d-flex align-items-center justify-content-center border">
    <!-- Centered content box -->
  </div>
</div>

<!-- Split screen -->
<div class="vh-100 d-flex">
  <div class="w-50 bg-primary">Left side</div>
  <div class="w-50 bg-success">Right side</div>
</div>

Responsive Sizing

Responsive Width Examples

.w-100 .w-md-75 .w-lg-50

.w-75 .w-md-50 .w-lg-25

.w-50 .w-md-100 .w-lg-75

Responsive Height Examples

.h-25 .h-md-50 .h-lg-75

Breakpoint Table

Breakpoint	Width Prefix	Height Prefix	Example
All	`w-`	`h-`	`.w-50`
≥576px	`w-sm-`	`h-sm-`	`.w-sm-75`
≥768px	`w-md-`	`h-md-`	`.w-md-50`
≥992px	`w-lg-`	`h-lg-`	`.w-lg-25`
≥1200px	`w-xl-`	`h-xl-`	`.w-xl-100`

Max-width Responsive

.mw-100 .mw-md-75 .mw-lg-50

Auto Responsive

.w-100 .w-md-auto

Complex Responsive Example

Responsive Box

Changes size at each breakpoint

<!-- Responsive width -->
<div class="w-100 w-md-75 w-lg-50">
  <!-- 
    100% on mobile
    75% on tablet
    50% on desktop
  -->
</div>

<div class="w-50 w-md-100 w-lg-75 w-xl-50">
  <!-- 
    50% on mobile
    100% on tablet
    75% on desktop
    50% on large desktop
  -->
</div>

<!-- Responsive height -->
<div class="h-100 h-md-75 h-lg-50">
  <!-- 
    100% on mobile
    75% on tablet
    50% on desktop
  -->
</div>

<!-- Responsive max-width -->
<div class="mw-100 mw-md-75 mw-lg-50">
  <!-- 
    Max 100% on mobile
    Max 75% on tablet
    Max 50% on desktop
  -->
</div>

<!-- Responsive auto width -->
<div class="w-100 w-md-auto">
  <!-- Full width on mobile, auto width on tablet+ -->
</div>

<!-- Responsive viewport sizing -->
<div class="vh-100 vh-md-75 vh-lg-50">
  <!-- 
    100vh on mobile
    75vh on tablet
    50vh on desktop
  -->
</div>

<div class="min-vh-100 min-vh-md-75 min-vh-lg-50">
  <!-- 
    Min 100vh on mobile
    Min 75vh on tablet
    Min 50vh on desktop
  -->
</div>

<!-- Complex responsive sizing -->
<div class="w-100 h-100 w-md-75 h-md-75 w-lg-50 h-lg-50">
  <!-- 
    Full size on mobile
    75% on tablet
    50% on desktop
  -->
</div>

<!-- Form elements with responsive sizing -->
<input type="text" class="form-control w-100 w-md-75 w-lg-50" 
       placeholder="Responsive input">

<textarea class="form-control h-100 h-md-75 h-lg-50" 
          placeholder="Responsive textarea"></textarea>

<!-- Responsive buttons -->
<button class="btn btn-primary w-100 w-md-auto">
  Full width on mobile, auto on desktop
</button>

<!-- Responsive cards -->
<div class="card w-100 w-md-75 w-lg-50 mx-auto">
  <div class="card-body">Responsive card</div>
</div>

<!-- Responsive images -->
<img src="image.jpg" class="img-fluid w-100 w-md-75 w-lg-50" alt="Responsive image">

<!-- Navigation with responsive sizing -->
<nav class="navbar w-100 w-lg-75 mx-lg-auto">
  <!-- Full width on mobile, centered 75% on desktop -->
</nav>

Object Fit

Image & Object Sizing

Cover

.object-fit-cover

Contain

.object-fit-contain

Fill

.object-fit-fill

Scale Down

.object-fit-scale-down

Object Position

.object-position-center

.object-position-bottom

Object Fit Table

Class	CSS Property	Description	Use Case
`.object-fit-contain`	`object-fit: contain`	Scale to fit, maintain ratio	Logos, icons
`.object-fit-cover`	`object-fit: cover`	Cover area, maintain ratio	Background images
`.object-fit-fill`	`object-fit: fill`	Stretch to fill	Patterns, textures
`.object-fit-scale-down`	`object-fit: scale-down`	Like contain or none	Flexible images
`.object-fit-none`	`object-fit: none`	No scaling	Pixel art

<!-- Object fit utilities -->
<img src="image.jpg" class="object-fit-contain" alt="Contain">
<img src="image.jpg" class="object-fit-cover" alt="Cover">
<img src="image.jpg" class="object-fit-fill" alt="Fill">
<img src="image.jpg" class="object-fit-scale-down" alt="Scale Down">
<img src="image.jpg" class="object-fit-none" alt="None">

<!-- With sizing -->
<div style="width: 300px; height: 200px;">
  <img src="image.jpg" class="w-100 h-100 object-fit-cover" alt="Cover">
</div>

<!-- Object position -->
<img src="image.jpg" class="object-fit-cover object-position-center" alt="Center">
<img src="image.jpg" class="object-fit-cover object-position-top" alt="Top">
<img src="image.jpg" class="object-fit-cover object-position-bottom" alt="Bottom">
<img src="image.jpg" class="object-fit-cover object-position-left" alt="Left">
<img src="image.jpg" class="object-fit-cover object-position-right" alt="Right">

<!-- All position classes -->
.object-position-center { object-position: center; }
.object-position-top { object-position: top; }
.object-position-bottom { object-position: bottom; }
.object-position-left { object-position: left; }
.object-position-right { object-position: right; }
.object-position-top-left { object-position: top left; }
.object-position-top-right { object-position: top right; }
.object-position-bottom-left { object-position: bottom left; }
.object-position-bottom-right { object-position: bottom right; }

<!-- Practical examples -->
<!-- Hero background -->
<div class="position-relative vh-100">
  <img src="hero.jpg" 
       class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
       alt="Hero background">
  <div class="position-relative z-1 text-white p-5">
    Hero content
  </div>
</div>

<!-- Profile picture -->
<div class="rounded-circle overflow-hidden" style="width: 150px; height: 150px;">
  <img src="avatar.jpg" 
       class="w-100 h-100 object-fit-cover"
       alt="Profile picture">
</div>

<!-- Card image -->
<div class="card">
  <div style="height: 200px; overflow: hidden;">
    <img src="card-image.jpg" 
         class="w-100 h-100 object-fit-cover"
         alt="Card image">
  </div>
  <div class="card-body">
    Card content
  </div>
</div>

<!-- Logo container -->
<div class="bg-light p-3" style="width: 100px; height: 50px;">
  <img src="logo.png" 
       class="w-100 h-100 object-fit-contain"
       alt="Company logo">
</div>

<!-- Gallery grid -->
<div class="row">
  <div class="col-md-4">
    <div style="height: 200px;">
      <img src="gallery1.jpg" 
           class="w-100 h-100 object-fit-cover"
           alt="Gallery image">
    </div>
  </div>
  <!-- More columns -->
</div>

<!-- Background pattern -->
<div class="bg-pattern" style="height: 300px;">
  <img src="pattern.png" 
       class="w-100 h-100 object-fit-fill"
       alt="Background pattern">
</div>

Practical Examples

Dashboard Layout

Dashboard

Revenue

$12,450

+12%

Users

1,245

+8%

Orders

324

-3%

Growth

24.5%

+2%

Activity Chart

Chart Area (200px height)

Recent Activity

User activity 1

2 hours ago

User activity 2

2 hours ago

User activity 3

2 hours ago

User activity 4

2 hours ago

User activity 5

2 hours ago

<!-- Dashboard layout -->
<div class="min-vh-75">
  <div class="d-flex h-100">
    <!-- Sidebar -->
    <aside class="w-25 bg-light">
      Sidebar content
    </aside>
    
    <!-- Main content -->
    <main class="flex-grow-1 overflow-auto">
      <!-- Stats cards -->
      <div class="row">
        <div class="col-md-6 col-lg-3">
          <div class="card h-100">
            <div class="card-body">
              Card content
            </div>
          </div>
        </div>
      </div>
      
      <!-- Chart area -->
      <div class="row">
        <div class="col-lg-8">
          <div class="card h-100">
            <div class="card-body">
              <div class="h-200px">
                Chart container
              </div>
            </div>
          </div>
        </div>
        
        <!-- Activity feed -->
        <div class="col-lg-4">
          <div class="card h-100">
            <div class="card-body">
              <div class="mh-200px overflow-auto">
                Scrollable content
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

Product Gallery

Sale

Premium Headphones

Wireless headphones with noise cancellation

$299.99

Smart Watch

Fitness tracker with heart rate monitor

$199.99

Image Grid

Responsive Image Container

.ratio .ratio-16x9 .object-fit-cover

<!-- Product card with image -->
<div class="card">
  <!-- Image container -->
  <div style="height: 200px;">
    <img src="product.jpg" 
         class="w-100 h-100 object-fit-cover" 
         alt="Product">
  </div>
  
  <div class="card-body">
    <h6 class="card-title">Product Name</h6>
    <p class="card-text text-muted">Description</p>
    
    <div class="d-flex justify-content-between align-items-center">
      <span class="h5 mb-0">$Price</span>
      <button class="btn btn-sm btn-primary">Action</button>
    </div>
  </div>
</div>

<!-- Thumbnail grid -->
<div class="row g-2">
  <div class="col-3">
    <div style="height: 80px;" class="overflow-hidden">
      <img src="thumb.jpg" 
           class="w-100 h-100 object-fit-cover" 
           alt="Thumbnail">
    </div>
  </div>
  <!-- More thumbnails -->
</div>

<!-- Responsive ratio container -->
<div class="ratio ratio-16x9">
  <img src="image.jpg" 
       class="object-fit-cover" 
       alt="Responsive image">
</div>

<!-- Alternative ratios -->
<div class="ratio ratio-1x1">1:1 (Square)</div>
<div class="ratio ratio-4x3">4:3 (Standard)</div>
<div class="ratio ratio-16x9">16:9 (Widescreen)</div>
<div class="ratio ratio-21x9">21:9 (Ultrawide)</div>

<!-- Custom ratio -->
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <!-- 2:1 ratio -->
</div>

Best Practices

Sizing Utility Guidelines

✅ Use percentage widths (.w-50) for fluid layouts
✅ Use viewport units (.vh-100) for full-screen sections
✅ Use .mw-100 to prevent overflow on images and content
✅ Use .h-100 with flexbox for equal height columns
✅ Use .object-fit-cover for background-style images
✅ Use .object-fit-contain for logos and icons
✅ Use responsive sizing for mobile-first designs
✅ Test sizing on different screen sizes and devices

Common Sizing Patterns

Pattern	Classes	Result	Use Case
Full-screen hero	`.min-vh-100 .w-100`	Covers entire viewport	Hero sections, landing pages
Equal height cards	`.h-100` on cards	Cards equal in height	Card grids, product listings
Fixed aspect ratio	`.ratio .ratio-16x9`	Maintains aspect ratio	Images, videos, embeds
Scrollable content	`.h-100 .overflow-auto`	Fixed height with scroll	Sidebars, chat windows
Centered container	`.w-50 .mx-auto`	Centered fixed width	Forms, modals, content
Responsive image	`.img-fluid .mw-100`	Responsive without overflow	Images in containers

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial