Sizing
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
Width classes
Width and height utilities are generated from the $sizes Sass map in assets/include/scss/vendor/bootstrap/_custom.bootstrap.variables.scss. Includes support for responsive .{parameter}-{breakpoint}-{value} for sm, md, lg, and xl classes. Modify those values as you need to generate different utilities here.
Width 15%
Width 20%
Width 25%
Width 30%
Width 35%
Width 40%
Width 50%
Width 60%
Width 65%
Width 75%
Width 80%
Width 85%
Width 100%
<div class="w-15 bg-secondary text-white p-3 mb-1">Width 15%</div>
<div class="w-20 bg-secondary text-white p-3 mb-1">Width 20%</div>
<div class="w-25 bg-secondary text-white p-3 mb-1">Width 25%</div>
<div class="w-30 bg-secondary text-white p-3 mb-1">Width 30%</div>
<div class="w-35 bg-secondary text-white p-3 mb-1">Width 35%</div>
<div class="w-40 bg-secondary text-white p-3 mb-1">Width 40%</div>
<div class="w-50 bg-secondary text-white p-3 mb-1">Width 50%</div>
<div class="w-60 bg-secondary text-white p-3 mb-1">Width 60%</div>
<div class="w-60 bg-secondary text-white p-3 mb-1">Width 65%</div>
<div class="w-75 bg-secondary text-white p-3 mb-1">Width 75%</div>
<div class="w-80 bg-secondary text-white p-3 mb-1">Width 80%</div>
<div class="w-80 bg-secondary text-white p-3 mb-1">Width 85%</div>
<div class="w-100 bg-secondary text-white p-3 mb-1">Width 100%</div>
You can also use max-width: 100%; utility as needed.
<img class="mw-100" src="../assets/img/img3.jpg" alt="Max-width 100%" />
Min-width classes
Min-width 3
Min-width 4
Min-width 15
Min-width 21
<div class="min-width-3 bg-secondary text-white p-3 mb-1">Min-width 3</div>
<div class="min-width-4 bg-secondary text-white p-3 mb-1">Min-width 4</div>
<div class="min-width-15 bg-secondary text-white p-3 mb-1">Min-width 15</div>
<div class="min-width-21 bg-secondary text-white p-3 mb-1">Min-width 21</div>
Max-width classes
Max-width 3
Max-width 4
Max-width 5
Max-width 6
Max-width 8
Max-width 9
Max-width 10
Max-width 11
Max-width 15
Max-width 19
Max-width 23
Max-width 27
Max-width 35
Max-width 40
Max-width 50
Max-width 60
<div class="max-width-3 bg-secondary text-white p-3 mb-1">Max-width 3</div>
<div class="max-width-4 bg-secondary text-white p-3 mb-1">Max-width 4</div>
<div class="max-width-5 bg-secondary text-white p-3 mb-1">Max-width 5</div>
<div class="max-width-6 bg-secondary text-white p-3 mb-1">Max-width 6</div>
<div class="max-width-8 bg-secondary text-white p-3 mb-1">Max-width 8</div>
<div class="max-width-9 bg-secondary text-white p-3 mb-1">Max-width 9</div>
<div class="max-width-10 bg-secondary text-white p-3 mb-1">Max-width 10</div>
<div class="max-width-11 bg-secondary text-white p-3 mb-1">Max-width 11</div>
<div class="max-width-15 bg-secondary text-white p-3 mb-1">Max-width 15</div>
<div class="max-width-19 bg-secondary text-white p-3 mb-1">Max-width 19</div>
<div class="max-width-23 bg-secondary text-white p-3 mb-1">Max-width 23</div>
<div class="max-width-27 bg-secondary text-white p-3 mb-1">Max-width 27</div>
<div class="max-width-35 bg-secondary text-white p-3 mb-1">Max-width 35</div>
<div class="max-width-40 bg-secondary text-white p-3 mb-1">Max-width 40</div>
<div class="max-width-50 bg-secondary text-white p-3 mb-1">Max-width 50</div>
<div class="max-width-60 bg-secondary text-white p-3 mb-1">Max-width 60</div>
Height classes
Height 15%
Height 25%
Height 30%
Height 35%
Height 40%
Height 50%
Height 60%
Height 65%
Height 75%
Height 80%
Height 85%
Height 100%
<div style="height: 300px;">
<div class="h-15 d-inline-block bg-primary text-white" style="width: 65px;">Height 15%</div>
<div class="h-25 d-inline-block bg-primary text-white" style="width: 65px;">Height 25%</div>
<div class="h-30 d-inline-block bg-primary text-white" style="width: 65px;">Height 30%</div>
<div class="h-35 d-inline-block bg-primary text-white" style="width: 65px;">Height 35%</div>
<div class="h-40 d-inline-block bg-primary text-white" style="width: 65px;">Height 40%</div>
<div class="h-50 d-inline-block bg-primary text-white" style="width: 65px;">Height 50%</div>
<div class="h-60 d-inline-block bg-primary text-white" style="width: 65px;">Height 60%</div>
<div class="h-60 d-inline-block bg-primary text-white" style="width: 65px;">Height 65%</div>
<div class="h-75 d-inline-block bg-primary text-white" style="width: 65px;">Height 75%</div>
<div class="h-80 d-inline-block bg-primary text-white" style="width: 65px;">Height 80%</div>
<div class="h-80 d-inline-block bg-primary text-white" style="width: 65px;">Height 85%</div>
<div class="h-100 d-inline-block bg-primary text-white" style="width: 65px;">Height 100%</div>
</div>
You can also use max-height: 100%; utility as needed.
Max-height 100%
<div class="mh-100 bg-primary text-white" style="width: 100px; height: 200px;">Max-height 100%</div>
Viewport height classes
<div class="height-40vh">.height-40vh</div>
<div class="height-60vh">.height-60vh</div>
<div class="height-100vh">.height-100vh</div>
Height utility classes
<div class="height-4">.height-4</div>
<div class="height-250">.height-250</div>
<div class="height-380">.height-380</div>
<div class="height-400">.height-400</div>
<div class="height-450">.height-450</div>
Min height classes
<div class="min-height-155">.min-height-155</div>
<div class="min-height-300">.min-height-300</div>
<div class="min-height-380">.min-height-380</div>
<div class="min-height-450">.min-height-450</div>
<div class="min-height-550">.min-height-550</div>
<div class="min-height-600">.min-height-600</div>
<div class="min-height-620">.min-height-620</div>
Height responsive classes
Small devices (tablets, 576px and up)
<div class="height-sm-100vh">.height-sm-100vh</div>
Medium devices (tablets, 768px and up)
<div class="height-md-60vh">.height-md-60vh</div>
<div class="height-md-100vh">.height-md-100vh</div>
<div class="min-height-md-100vh">.min-height-md-100vh</div>
Large devices (desktops, 992px and up)
<div class="height-lg-100vh">.height-lg-100vh</div>
<div class="min-height-lg-auto">.min-height-lg-auto</div>
<div class="min-height-lg-100vh">.min-height-lg-100vh</div>
Extra large devices (desktops, 1200px and up)
<div class="height-xl-100vh">.height-xl-100vh</div>
Important
Front does not include all classes, but includes only used classes to reduce the size of CSS files. However, you can add more sizes by adding entries to the Sass map variable via:
assets/include/scss/base/utilities/_sizing.scss.