Skip to main content
Figuration v4 is now available!
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.