Skip to content

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

ClassDescription
wwidth: 100%
w:0width: 0
w:autowidth: auto
minmin-width: 0
min:100min-width: 100%
maxmax-width: none
max:0max-width: 0
max:100max-width: 100%
ClassDescription
hheight: 100%
h:0height: 0
h:autoheight: auto
minmin-height: 0
min:100min-height: 100%
maxmax-height: none
max:0max-height: 0
max:100max-height: 100%

Width / Height - Utilities

Width

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

w:0

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

w:a

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

min

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

min:100

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

max

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

max:0

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

max:100

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

Height

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

h:0

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

h:a

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

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

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

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

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

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

Released under the MIT License