Size

The size utility classes help manage the width and height of an element. These classes allow you to control the size properties easily.

CSS Classes

Class	Description
w	width: 100%
w:0	width: 0
w:auto	width: auto
min	min-width: 0
min:100	min-width: 100%
max	max-width: none
max:0	max-width: 0
max:100	max-width: 100%

Class	Description
h	height: 100%
h:0	height: 0
h:auto	height: auto
min	min-height: 0
min:100	min-height: 100%
max	max-height: none
max:0	max-height: 0
max:100	max-height: 100%

Width / Height - Utilities

Width

<div class="w">
  100% Width
</div>

100% Width

w:0

<div class="w:0">
  0 Width
</div>

0 Width

w:a

<div class="w:a">
  Auto Width
</div>

Auto Width

min

<div class="w min">
  Min Width 0
</div>

Min Width 0

min:100

<div class="w min:100">
  Min Width 100%
</div>

Min Width 100%

max

<div class="w max">
  Max Width None
</div>

Max Width None

max:0

<div class="w max:0">
  Max Width 0
</div>

Max Width 0

max:100

<div class="w max:100">
  Max Width 100%
</div>

Max Width 100%

Height

<div class="h">
  100% Height
</div>

100% Height

h:0

<div class="h:0">
  0 Height
</div>

0 Height

h:a

<div class="h:a">
  Auto Height
</div>

Auto Height

<div class="h min">
  Min Height 0
</div>

Min Height 0

<div class="h min:100">
  Min Height 100%
</div>

Min Height 100%

<div class="h max">
  Max Height None
</div>

Max Height None

<div class="h max:0">
  Max Height 0
</div>

Max Height 0

<div class="h max:100">
  Max Height 100%
</div>

Max Height 100%