Skip to content
Notifications
Kenji Kowalski sent a new order
4 days agoMason Brennan commented on your task
6 days agoLeo Delgado sent a new order
16 hours ago
View all

Sizing

Sizing utilities set width and height as a percentage of the parent (w-25 to w-100, h-25 to h-100, plus w-auto and h-auto), cap them with mw-100 and mh-100, or relate them to the viewport with vw-100, vh-100, min-vw-100 and min-vh-100.

1Width percentages

w-25, w-50, w-75, w-100 and w-auto relative to the parent.

w-25
w-50
w-75
w-100
w-auto

2Height percentages

h-25 to h-100 relative to a parent with a fixed height.

h-25
h-50
h-75
h-100
h-auto

3Max width 100

mw-100 keeps a wide element from overflowing its parent.

Five things we learned this year
mw-100 on a 900px wide image

4Max height 100

mh-100 limits a child to the height of its parent.

The best neighbourhoods for families this year
mh-100 keeps the 300px image inside the 120px box.

5Full width button

w-100 turns a button into a block that fills its column.

Building plot
$60.52

6Progress bars with widths

Width utilities on the inner bar of a meter.

Fast paperwork25%
Verified listings50%
Fast paperwork75%

7Equal height cards

h-100 on cards inside a row makes every card as tall as the tallest.

Powerful team practical
Honest advice comes first, even when it means waiting for the right home. Most of our homes sell within six weeks, often above the asking price.
Thousands of buyers already trust us, and we work hard to keep it that way.

8Half width on desktop only

w-100 on phones; the grid column col-md-6 does the narrowing from md, so the form stays readable.

9Full height split

Two panes with h-100 inside a fixed height container.

w-25 h-100
w-75 h-100

10Viewport units (preview)

vw-100, vh-100, min-vw-100 and min-vh-100 size elements to the viewport; shown here as a reference table.

ClassSetsTypical use
vh-100height: 100vhfull screen hero
min-vh-100min-height: 100vhsticky footer layout
vw-100width: 100vwedge to edge strip
min-vw-100min-width: 100vwwide canvas

11Auto width in flex

w-auto lets an input shrink to its content inside a flex row.

12Image fills its column

w-100 on an image makes it scale to the column width.

Our favourite tips for busy weeks
How our valuations work

13Half width centred

w-50 with mx-auto centres a narrow block.

w-50 mx-auto

14Stat bars

Horizontal bars with width utilities compare four values.

  • Aria
  • Tariq
  • Noah
  • Diego

15Vertical bar chart

h-25 to h-100 bars in a fixed height chart area.

MonTueWedThuFri

16Fixed size icon tiles

Fixed inline sizes plus flex centring for square icon tiles.

17Search bar width

w-100 on phones and w-50 from md via a responsive column, centred with mx-auto.

18Sidebar and content

A narrow fixed sidebar and a flex-grow-1 content area that takes the rest.

90px
flex-grow-1: We keep things simple, so you can focus on what matters to you.

19Responsive image height

h-auto with w-100 keeps the aspect ratio when the width changes.

Sell faster with an expert at your side

20Width per column item

Labels with w-25 align a description list without a grid.

Name
Leo Fischer
Email
isla.tanaka@example.com
City
Singapore