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 25%
, 50%
, 75%
, and 100%
by default. Modify those values as you need to generate different utilities here.
<div class="w-15 bg-secondary text-white p-3 mb-1">Width 15%</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-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-100 bg-secondary text-white p-3 mb-1">Width 100%</div>
Important
Space 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 $sizes
Sass map variable via: assets/include/scss/vendor/bootstrap/_custom.bootstrap.variables.scss
.
You can also use max-width: 100%;
utility as needed.
<img class="mw-100" src="..." alt="Max-width 100%">
Min-width classes
<div class="min-width-3 bg-secondary text-white p-3 mb-1">Min-width 3</div>
<div class="min-width-35 bg-secondary text-white p-3 mb-1">Min-width 35</div>
Max-width classes
<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-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-12 bg-secondary text-white p-3 mb-1">Max-width 12</div>
<div class="max-width-14 bg-secondary text-white p-3 mb-1">Max-width 14</div>
<div class="max-width-18 bg-secondary text-white p-3 mb-1">Max-width 18</div>
<div class="max-width-sm-40 bg-secondary text-white p-3 mb-1">Max-width 40</div>
Important
Space 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/_width.scss
.
Width responsive classes
Small devices (landscape phones, 576px and up)
<div class="w-sm-15 bg-secondary text-white p-3 mb-1">Width-sm 15%</div>
<div class="w-sm-25 bg-secondary text-white p-3 mb-1">Width-sm 25%</div>
<div class="w-sm-30 bg-secondary text-white p-3 mb-1">Width-sm 30%</div>
<div class="w-sm-35 bg-secondary text-white p-3 mb-1">Width-sm 35%</div>
<div class="w-sm-40 bg-secondary text-white p-3 mb-1">Width-sm 40%</div>
<div class="w-sm-50 bg-secondary text-white p-3 mb-1">Width-sm 50%</div>
<div class="w-sm-60 bg-secondary text-white p-3 mb-1">Width-sm 60%</div>
<div class="w-sm-75 bg-secondary text-white p-3 mb-1">Width-sm 75%</div>
<div class="w-sm-80 bg-secondary text-white p-3 mb-1">Width-sm 80%</div>
<div class="w-sm-100 bg-secondary text-white p-3 mb-1">Width-sm 100%</div>
Medium devices (tablets, 768px and up)
<div class="w-md-15 bg-secondary text-white p-3 mb-1">Width-md 15%</div>
<div class="w-md-25 bg-secondary text-white p-3 mb-1">Width-md 25%</div>
<div class="w-md-30 bg-secondary text-white p-3 mb-1">Width-md 30%</div>
<div class="w-md-35 bg-secondary text-white p-3 mb-1">Width-md 35%</div>
<div class="w-md-40 bg-secondary text-white p-3 mb-1">Width-md 40%</div>
<div class="w-md-50 bg-secondary text-white p-3 mb-1">Width-md 50%</div>
<div class="w-md-60 bg-secondary text-white p-3 mb-1">Width-md 60%</div>
<div class="w-md-75 bg-secondary text-white p-3 mb-1">Width-md 75%</div>
<div class="w-md-80 bg-secondary text-white p-3 mb-1">Width-md 80%</div>
<div class="w-md-100 bg-secondary text-white p-3 mb-1">Width-md 100%</div>
Large devices (desktops, 992px and up)
<div class="w-lg-15 bg-secondary text-white p-3 mb-1">Width-lg 15%</div>
<div class="w-lg-25 bg-secondary text-white p-3 mb-1">Width-lg 25%</div>
<div class="w-lg-30 bg-secondary text-white p-3 mb-1">Width-lg 30%</div>
<div class="w-lg-35 bg-secondary text-white p-3 mb-1">Width-lg 35%</div>
<div class="w-lg-40 bg-secondary text-white p-3 mb-1">Width-lg 40%</div>
<div class="w-lg-50 bg-secondary text-white p-3 mb-1">Width-lg 50%</div>
<div class="w-lg-60 bg-secondary text-white p-3 mb-1">Width-lg 60%</div>
<div class="w-lg-75 bg-secondary text-white p-3 mb-1">Width-lg 75%</div>
<div class="w-lg-80 bg-secondary text-white p-3 mb-1">Width-lg 80%</div>
<div class="w-lg-100 bg-secondary text-white p-3 mb-1">Width-lg 100%</div>
Extra large devices (large desktops, 1200px and up)
<div class="w-xl-15 bg-secondary text-white p-3 mb-1">Width-xl 15%</div>
<div class="w-xl-25 bg-secondary text-white p-3 mb-1">Width-xl 25%</div>
<div class="w-xl-30 bg-secondary text-white p-3 mb-1">Width-xl 30%</div>
<div class="w-xl-35 bg-secondary text-white p-3 mb-1">Width-xl 35%</div>
<div class="w-xl-40 bg-secondary text-white p-3 mb-1">Width-xl 40%</div>
<div class="w-xl-50 bg-secondary text-white p-3 mb-1">Width-xl 50%</div>
<div class="w-xl-60 bg-secondary text-white p-3 mb-1">Width-xl 60%</div>
<div class="w-xl-75 bg-secondary text-white p-3 mb-1">Width-xl 75%</div>
<div class="w-xl-80 bg-secondary text-white p-3 mb-1">Width-xl 80%</div>
<div class="w-xl-100 bg-secondary text-white p-3 mb-1">Width-xl 100%</div>
Height classes
<div style="height: 300px; background-color: rgba(55,125,255,.1);">
<div class="h-15 d-inline-block bg-primary text-white" style="width: 80px;">Height 15%</div>
<div class="h-25 d-inline-block bg-primary text-white" style="width: 80px;">Height 25%</div>
<div class="h-30 d-inline-block bg-primary text-white" style="width: 80px;">Height 30%</div>
<div class="h-35 d-inline-block bg-primary text-white" style="width: 80px;">Height 35%</div>
<div class="h-40 d-inline-block bg-primary text-white" style="width: 80px;">Height 40%</div>
<div class="h-50 d-inline-block bg-primary text-white" style="width: 80px;">Height 50%</div>
<div class="h-60 d-inline-block bg-primary text-white" style="width: 80px;">Height 60%</div>
<div class="h-75 d-inline-block bg-primary text-white" style="width: 80px;">Height 75%</div>
<div class="h-80 d-inline-block bg-primary text-white" style="width: 80px;">Height 80%</div>
<div class="h-100 d-inline-block bg-primary text-white" style="width: 80px;">Height 100%</div>
</div>
You can also use max-height: 100%;
utility as needed.
<div style="height: 100px; background-color: rgba(55,125,255,.1);">
<div class="mh-100 bg-primary text-white" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>
Pixel height classes
<div class="min-height-400">.min-height-400</div>
<div class="min-height-600">.min-height-600</div>
Viewport height classes
<div class="min-height-100vh">.min-height-100vh</div>
Min-height classes
<div class="min-height-280">.min-height-280</div>
Height responsive classes
Small devices (tablets, 576px and up)
<div class="min-height-100vh--sm">.min-height-100vh--sm</div>
Medium devices (tablets, 768px and up)
<div class="min-height-100vh--md">.min-height-100vh--md</div>
Large devices (desktops, 992px and up)
<div class="min-height-15vh--lg">.min-height-15vh--lg</div>
<div class="min-height-85vh--lg">.min-height-85vh--lg</div>
<div class="min-height-100vh--lg">.min-height-100vh--lg</div>
Extra large devices (desktops, 1200px and up)
<div class="min-height-100vh--xl">.min-height-100vh--xl</div>
Important
Space 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/_height.scss
.