Sizes and Ratios

Some classes will help you size or fit an element to specific proportions.

Width

• w-{TYP}
  • TYP: 25 50 75 100 auto mw-100 vw-100

Try it

Here are the classes that help you control the width of an item.

The first few let you change the widt of an item to a percentage of the width of the container.

auto will try to match the width of the container.

mw-100 will try to be a maximum of 100% of the width of the container. Notice that if I make the container bigger, it will revert to 100% width

vw-100 tries to match the width of the viewport...most of the time, the browser window.

Height

• h-{TYP}
  • TYP: 25 50 75 100 auto mh-100 vh100

Try it

Similarly there are ways to control the height that correspond to the most common CSS heights.

The first few will try to make an element a percentage of the height of the container...as long as the container has a height.

mh-100 will set the maximum height of an element to 100% of the height of the container.

vw-100 will attempt to make the element match the height of the viewport. This is usually the height of the browser window.

auto will try to make the element have a natural height. Notice that if I take the vh-100 height off, then they go back to an automatic height.

Height is probably one of the most unpredictable measurements in HTML and the source of frustration. It's not Bootstrap being weird. It's CSS being weird.

Notice that if I take the vh-100, then the height of the percentages goes away.

Also, if I change the display type of the element with h-100 then the element tries to match the height of the parent.

Aspect Ratios

ratio

• ratio-{VAL}
  • VAL: 1x1 4x3 16x9 21x9

Try it

There are some aspect ratio classes to help with setting the proportions of elements. These are designed to go in a container class that wraps elements like <iframe> <embed> <video>
<object> but will work with other elements like <div> or <img>.