Width


displayn/a positionn/a z-indexn/a font-size scalingn/a breakpointsno

Class list

  • .w-1-4
  • .w-1-3
  • .w-1-2
  • .w-2-3
  • .w-3-4
  • .w-1
  • .w-1-4-vw
  • .w-1-3-vw
  • .w-1-2-vw
  • .w-2-3-vw
  • .w-3-4-vw
  • .w-1-vw

Description

The width utility classes use a fraction notation to indicate their values. For example, .w-1-2 would be equivalent to 1/2 of the parent element width, and .w-3-4 would be equivalent to 3/4 of the parent element width.

Percentages

The regular width utility classes use percentages as the units of their values. For example, .w-1-4 would use 25% of its parent element's width.

vw Units

The width utility classes ending with -vw use vw units, which can be thought of as a percentage of the viewport width. For example, .w-1-vw would use 100% of the viweport width.