Bootstrap Sizing

Easily make an element as wide or as tall with our width and height utilities.

Pro

Height in rem unit

Set height of an element in rem unit by adding h-{size}rem class. Where size is one of 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, To make it responsive, use h-{breakpoint}-{size}rem where breakpoint is one of sm, md, lg, and xl.

In below example, the first two elements has fixed height 5rem and 10rem on all resolutions. However, the third element has 5rem height from xs resolution up, but from the md resolution, it has changed to 15rem.

Example shows the first two elements with fixed heigh and the third that has height: 5rem from xs resolution up to md, where the height will change to height: 15rem. Resize the browser to see it live.

.h-5rem
.h-10rem
.h-md-15rem .h-5rem
<div class="h-5rem">.h-5rem</div>
<div class="h-10rem">.h-10rem</div>
<div class="h-md-15rem h-5rem">.h-md-15rem .h-5rem</div>

You can add or remove the height values in _variables.scss. Here’s a default height list for the $height-rem:

$height-rem: (
  0,
  5,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50
);

Relative to the parent

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

Width

Bootstrap default w-{size} where size is one of 25%, 50%, 75%, 100%, and auto.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

Height

Bootstrap default h-{size} where size is one of 25%, 50%, 75%, 100%, and auto.

Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div style="height: 200px; background-color: rgba(0,0,255,.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>
Pro

Responsive width

Torus Kit w-{breakpoint}-{size} where breakpoint is one of sm, md, lg, and xl.

.w-25 .w-md-75
.w-100 .w-sm-50 .w-lg-25
<div class="w-25 w-md-75">.w-25 .w-md-75</div>
<div class="w-100 w-sm-50 w-lg-25">.w-100 .w-sm-50 .w-lg-25</div>
Pro

Responsive height

Torus Kit h-{breakpoint}-{size} where breakpoint is one of sm, md, lg, and xl. In this example, the first element has heigh: 25% and the height: 75% from sm resolution and up. The second one has also heigh: 25%, but heigh: auto from md resolution and up.

.h-25 .h-sm-75
.h-25 .h-md-auto
<div class="h-25 h-sm-75">.h-25 .h-sm-75</div>
<div class="h-25 h-md-auto">.h-25 .h-md-auto</div>

Max-width and Max-height

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

PlaceholderMax-width 100%
<svg class="td-placeholder-img mw-100" width="100%" height="100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Max-width 100%"><title>Placeholder</title><rect width="100%" height="100%" fill=""/><text x="50%" y="50%" fill="" dy=".3em">Max-width 100%</text></svg>
Max-height 100%
<div style="height: 100px; background-color: rgba(0,0,255,.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.

Default

Viewport-relative height and width sets (as the name says) the size of an element according the viewport size. It can be one of:

  • min-vw-100: minimal element width is 100% of viewport width or more
  • min-vh-100: minimal element height is 100% of viewport height or more
  • vw-100: element width is exactly 100% of viewport width
  • vh-100: element height is exactly 100% of viewport height
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
Pro

Responsive

Torus Kit brings responsive features even for the viewport relative sizing.

Viewport width relative

These classes sets responsive behavior for elements width.

Min width of 100% viewport width

Set min-vw-100 fox xs and min-vw-{breakpoint}-100 for sm, md, lg, and xl.

<div class="w-25 min-vw-md-100">.w-25 .min-vw-md-100</div>


Width of 100% viewport width

Set vw-100 fox xs and vw-{breakpoint}-100 for sm, md, lg, and xl.

<div class="w-25 vw-md-100">.w-25 .vw-md-100</div>

Viewport height relative

These classes sets responsive behavior for elements height.

Min height of 100% viewport height

Set min-vh-100 fox xs and min-vh-{breakpoint}-100 for sm, md, lg, and xl.

<div class="h-25 min-vh-md-100">.h-25 .min-vh-md-100</div>


Width of 100% viewport width

Set vh-100 fox xs and vh-{breakpoint}-100 for sm, md, lg, and xl.

<div class="h-25 vh-md-100">.h-25 .vh-md-100</div>
Free

Equal .col columns height

When the content of .cols has different height, add .cols-flex into .row class to make their height equal.

Donec tincidunt libero orci, eget iaculis eros commodo
Quisque finibus ex a massa hendrerit, a elementum massa consequat. Aliquam in augue a orci condimentum commodo eu in turpis. Fusce vel eleifend risus, non placerat justo. Sed laoreet purus vitae arcu elementum laoreet. Sed a lacus ut tortor efficitur dictum
Praesent pulvinar enim magna, a fermentum purus suscipit lobortis. Donec tincidunt libero orci
<div class="row cols-flex">
  <div class="col-md-4">
    <div class="bg-primary bg-a-10">Donec tincidunt libero orci, eget iaculis eros commodo</div>
  </div>
  <div class="col-md-4">
    <div class="bg-primary bg-a-10">Quisque finibus ex a massa hendrerit, a elementum massa consequat. Aliquam in augue a orci condimentum commodo eu in turpis. Fusce vel eleifend risus, non placerat justo. Sed laoreet purus vitae arcu elementum laoreet. Sed a lacus ut tortor efficitur dictum</div>
  </div>
  <div class="col-md-4">
    <div class="bg-primary bg-a-10">Praesent pulvinar enim magna, a fermentum purus suscipit lobortis. Donec tincidunt libero orci</div>
  </div>
</div>