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

Result
HTML

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.

Result
HTML

<img class="mw-100" src="../assets/img/img3.jpg" alt="Max-width 100%" />

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

Result
HTML

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

Result
HTML

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.

Result
HTML

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>