Skip to main content
v4 Beta now available! Try it out!
Utilities

Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.

Sizing

Adjust the width or height of an element with some utilities.

Page Contents

100% Width/Height #

Easily make an element as wide as its parent using the .w-100 utility class, which sets width: 100%.

Width = 100%
<img class="w-100" src="..." alt="Width = 100%">

There is also a .h-100 utility class, which sets height: 100%. However, it probabaly won't always work the way you think it should. Some good information can be found in this article — How Do You Set the Height of an HTML Element to 100%?

Full height
.h-100
<div class="cf-example-height">
<div class="bg-gray-50 px-2 d-inline-block" style="height: 150px;">
<div class="h-100 bg-gray-300 text-center p-1 d-inline-block">
Full height<br />
<code>.h-100</code>
</div>
</div>
</div>

Max Width/Height #

You can also use the .mw-100 and .mh-100, to set max-width: 100%; or max-height: 100%;, utilities as needed.

Max-width 100%
<img class="mw-100" src="..." alt="Max-width 100%">
Max-height 100%
<div class="cf-example-height">
<div class="bg-gray-50 px-2 d-inline-block" style="height: 150px;">
<div class="mh-100 bg-gray-300 text-center p-1 d-inline-block" style="width: 100px; height: 200px;">
Max-height 100%
</div>
</div>
</div>

Auto Width/Height #

In those cases when you need to reset the dimension of an element to auto, you can use .w-auto or .h-auto.