Sizing

It is used to size the element. By using sizing utility, you can easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100% by default.

Width and height utilities are generated from the $sizes Sass map in _variables.scss. You can modify these values when you need to generate different utilities here.

Sizing by Width

Following is the syntax for sizing an element by width:

Syntax:

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>  

<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>  

<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>  

<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>  

Sizing by Height

Following is the syntax for sizing an element by height:

Syntax:

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">  

  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>  

  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>  

  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>  

  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>  

</div> 

Max Width & Height

You can also set width and height as maximum.

Maximum width:

Syntax:

max-width: 100%;  

Maximum Height:

Syntax:

max-height: 100%;