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.

Width 15%

Width 20%

Width 25%

Width 30%

Width 35%

Width 40%

Width 50%

Width 60%

Width 75%

Width 80%

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-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

Min-width 3

Min-width 35

<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

Max-width 3

Max-width 4

Max-width 5

Max-width 6

Max-width 7

Max-width 8

Max-width 9

Max-width 10

Max-width 12

Max-width 14

Max-width 18

Max-width 40

<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-7 bg-secondary text-white p-3 mb-1">Max-width 7</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-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)

Width-sm 15%

Width-sm 25%

Width-sm 30%

Width-sm 35%

Width-sm 40%

Width-sm 50%

Width-sm 60%

Width-sm 75%

Width-sm 80%

Width-sm 100%

<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)

Width-md 15%

Width-md 25%

Width-md 30%

Width-md 35%

Width-md 40%

Width-md 50%

Width-md 60%

Width-md 75%

Width-md 80%

Width-md 100%

<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)

Width-lg 15%

Width-lg 25%

Width-lg 30%

Width-lg 35%

Width-lg 40%

Width-lg 50%

Width-lg 60%

Width-lg 75%

Width-lg 80%

Width-lg 100%

<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)

Width-xl 15%

Width-xl 25%

Width-xl 30%

Width-xl 35%

Width-xl 40%

Width-xl 50%

Width-xl 60%

Width-xl 75%

Width-xl 80%

Width-xl 100%

<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

Height 15%

Height 25%

Height 30%

Height 35%

Height 40%

Height 50%

Height 60%

Height 75%

Height 80%

Height 100%

<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.

Max-height 100%

<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="height-400">.height-400</div>
<div class="height-550">.height-550</div>
<div class="height-600">.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>
<div class="min-height-320">.min-height-320</div>
<div class="min-height-400">.min-height-400</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>
<div class="height-600--lg">.height-600--lg</div>

Extra large devices (desktops, 1200px and up)

<div class="min-height-100vh--xl">.min-height-100vh--xl</div>