Sizing

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

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.