$sizes
Sass map in _variables.scss
. Includes support for 25%
, 50%
, 75%
, and 100%
by default. Modify those values as you need to generate different utilities here.<style type="text/css">
.box{
border:1px solid #000;
background:#EEE;
margin:5px;
}
</style>
<div class="w-25 p-3 box">Width 25%</div>
<div class="w-50 p-3 box">Width 50%</div>
<div class="w-75 p-3 box">Width 75%</div>
<div class="w-100 p-3 box">Width 100%</div>
<style type="text/css">
.box{
background:#EEE;
margin:5px;
}
</style>
<div class="bg-primary" style="height:120px;">
<div class="h-25 d-inline-block box" style="width: 120px;">Height 25%</div>
<div class="h-50 d-inline-block box" style="width: 120px;">Height 50%</div>
<div class="h-75 d-inline-block box" style="width: 120px;">Height 75%</div>
<div class="h-100 d-inline-block box" style="width: 120px;">Height 100%</div>
</div>
You can also use max-width: 100%;
and max-height: 100%;
utilities as needed.
<style type="text/css">
.box{
background:#EEE;
margin:5px;
border:1px solid #000;
height:80px;
padding:20px 0px;
}
</style>
<div class="mw-100 box">
<h2 class="text-center">Max-width = 100%</h2>
</div>
<div class="bg-secondary" style="height: 100px;">
<div class="mh-100 bg-primary text-light" style="width:150px; height: 200px;">Max-height 100%</div>
</div>