Sizing

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

Relative to the parent

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

Height

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