Sizes

With Vitamin Bootstrap, you have more control over the size of your elements. Whether you want to make your text larger or smaller, or adjust the size of your divs, the sizing classes make it easy to do so.

Relative to the parent

with vitamin now you have support for 0-100% counting by 5s by default.
Supported sizes for w, h, vw & vh are 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95 & 100

Responsive

The same way you use the responsive properties for other elements, now you can use for w, h, vh & vw just adding the resolution variant sm, md, lg, xl, xxl

W 10%

Width 15%

Width 25%

Width 40%

Width 60%

Width 80%

Width 90%

Width 100%

Width auto

html

                        
<div class="w-10 p-3">Width 10%</div>
<div class="w-15 p-3">Width 15%</div>
<div class="w-25 p-3">Width 25%</div>
<div class="w-40 p-3">Width 40%</div>
<div class="w-60 p-3">Width 60%</div>
<div class="w-80 p-3">Width 80%</div>
<div class="w-90 p-3">Width 90%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>

Height 15%

Height 40%

Height 65%

Height 80%

Height 100%

Height auto

Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.
from here vitamin
same way you use width and height, now you can customtize your designs with vh and vw from 0-100 counting by 5s

                
<div class="vw-5">Width 5vw</div>
<div class="vw-20">Width 20vw</div>
<div class="vw-35">Width 35vw</div>
<div class="vw-50">Width 50vw</div>
<div class="vw-75">Width 75vw</div>
<div class="vw-80">Width 80vw</div>
<div class="vw-100">Width 100vw</div>


<div class="vh-5">Height 5vh</div>
<div class="vh-20">Height 20vh</div>
<div class="vh-35">Height 35vh</div>
<div class="vh-50">Height 50vh</div>
<div class="vh-75">Height 75vh</div>
<div class="vh-80">Height 80vh</div>
<div class="vh-100">Height 100vh</div>