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.
100% Width/Height
Easily make an element as wide as its parent using the .w-100
utility class, which sets 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%?
.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.
<img class="mw-100" src="..." alt="Max-width 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
.