Size
Use size utilities to control an element's width and height responsively.
Responsive Sizes
Size utility classes are extended with the
screen width breakpoint postfixes,
they can be used to control an element’s size responsively.
Width classes are named using the format: .w-{value}-{postfix},
and height classes are named using the format: .h-{value}-{postfix}.
The value can be one of 25, 33, 50, 66, 75, 100 and auto.
Widths
.w-auto
.w-25
.w-33
.w-50
.w-66
.w-75
.w-100
<div class="bc-dark">
<p class="w-auto px-small d-inline-block va-top bc-primary c-light">.w-auto</p>
<p class="w-25 px-small bc-danger c-light">.w-25</p>
<p class="w-33 px-small bc-primary c-light">.w-33</p>
<p class="w-50 px-small bc-danger c-light">.w-50</p>
<p class="w-66 px-small bc-primary c-light">.w-66</p>
<p class="w-75 px-small bc-danger c-light">.w-75</p>
<p class="w-100 px-small bc-primary c-light">.w-100</p>
</div>
Heights
.h-25
.h-33
.h-50
.h-66
.h-75
.h-100
.h-auto
<div class="d-flex bc-dark" style="height: 21rem">
<p class="h-25 px-tiny bc-primary c-light">.h-25</p>
<p class="h-33 px-tiny bc-danger c-light">.h-33</p>
<p class="h-50 px-tiny bc-primary c-light">.h-50</p>
<p class="h-66 px-tiny bc-danger c-light">.h-66</p>
<p class="h-75 px-tiny bc-primary c-light">.h-75</p>
<p class="h-100 px-tiny bc-danger c-light">.h-100</p>
<p class="h-auto px-tiny bc-primary c-light">.h-auto</p>
</div>
Size Limitations
Size limitation utilities are not responsive, they’re used to limit the size of an element.
Width Limitations
The .max-w-100 class limits the maximum width of an element to 100%.
The .min-w-100 class limits the minimum width of an element to 100%.
The .min-w-100vw class limits the minimum width of an element to 100vw.
.max-w-100
<div class="bc-dark">
<p style="width: 200%" class="max-w-100 px-small bc-primary c-light">.max-w-100</p>
</div>
.min-w-100
<div class="bc-dark">
<p style="width: 20%" class="min-w-100 px-small bc-primary c-light">.min-w-100</p>
</div>
.min-w-100
<div class="bc-dark">
<p style="width: 20%" class="min-w-100vw px-small bc-primary c-light">.min-w-100</p>
</div>
Height Limitations
The .max-h-100 class limits the maximum height of an element to 100%.
The .min-h-100 class limits the minimum height of an element to 100%.
The .min-h-100vh class limits the minimum height of an element to 100vh.
.max-h-100
<div class="bc-dark" style="height: 6rem">
<p style="height: 200%" class="max-h-100 px-small bc-primary c-light">.max-h-100</p>
</div>
.min-h-100
<div class="bc-dark" style="height: 6rem">
<p class="min-h-100 px-small bc-primary c-light">.min-h-100</p>
</div>
.min-h-100vh
<div class="bc-dark">
<p class="min-h-100vh px-small bc-primary c-light">.min-h-100vh</p>
</div>