Skip to main content

Sizing

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.

Relative to the parent

w-25 (25%)
w-50 (50%)
w-75 (75%)
w-100 (100%)
<div class="w-25">Width 25%</div>
<div class="w-75">Width 75%</div>

Fractional widths

boodoo adds Tailwind-style fractional widths: .w-1\/2, .w-1\/3, .w-2\/3, .w-1\/4, .w-3\/4, .w-1\/5, .w-2\/5, .w-3\/5, .w-4\/5, .w-1\/6, and up to .w-5\/6, plus .w-full, .w-screen, .w-fit, and more.

w-1/2
w-1/3
w-2/3
<div class="w-1/2 p-2 bg-secondary rounded-2 text-white text-center mb-2"><span>w-1/2</span></div>
<div class="w-1/3 p-2 bg-secondary rounded-2 text-white text-center mb-2"><span>w-1/3</span></div>
<div class="w-2/3 p-2 bg-secondary rounded-2 text-white text-center mb-2"><span>w-2/3</span></div>

Height

h-25
h-50
h-75
h-100
<div class="h-25 bg-primary rounded-2 w-25 d-inline-flex align-items-center justify-content-center"><span>h-25</span></div>
<div class="h-50 bg-primary rounded-2 w-25 d-inline-flex align-items-center justify-content-center"><span>h-50</span></div>
<div class="h-75 bg-primary rounded-2 w-25 d-inline-flex align-items-center justify-content-center"><span>h-75</span></div>
<div class="h-100 bg-primary rounded-2 w-25 d-inline-flex align-items-center justify-content-center"><span>h-100</span></div>

Relative to the viewport

Use .min-vh-100 for a full-viewport-height section, .mh-100 for max-height, and vw/vh utilities like .w-100 (viewport width).

<div class="min-vh-100">Fills at least the viewport height</div>

Sass mixins

@import "node_modules/boodoo/scss/mixins";

.custom-class {
  width: 50% !important;
  height: 25% !important;
}