Sizing
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities
Includes support for 25% ,50% ,75% , and 100% by default. The classes are named using the format {property}-{size} for xs and {property}-{breakpoint}-{size} for sm ,md ,lg ,xl and xxl.
Width (relative to parent)
.w-fulldiv(class="w-3/4")div(class="w-1/2")div(class="w-1/4").w-auto<div class="bg-light text-dark p-2 border border-dashed mb-4 w-full"><code>.w-full</code></div>
<div class="bg-light text-dark p-2 border border-dashed mb-4 w-3/4"><code>div(class="w-3/4")</code></div>
<div class="bg-light text-dark p-2 border border-dashed mb-4 w-1/2"><code>div(class="w-1/2")</code></div>
<div class="bg-light text-dark p-2 border border-dashed mb-4 w-1/4"><code>div(class="w-1/4")</code></div>
<div class="bg-light text-dark p-2 border border-dashed mb-4 w-auto"><code>.w-auto</code></div>Height (relative to parent)
.h-fulldiv(class="h-3/4")div(class="h-1/2")div(class="h-1/4").h-auto<div class="h-[50vh] text-dark py-4">
<div class="row h-full">
<div class="col">
<div class="bg-light p-2 border border-dashed mb-4 h-full"><code>.h-full</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border border-dashed mb-4 h-3/4"><code>div(class="h-3/4")</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border border-dashed mb-4 h-1/2"><code>div(class="h-1/2")</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border border-dashed mb-4 h-1/4"><code>div(class="h-1/4")</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border border-dashed mb-4 h-auto"><code>.h-auto</code></div>
</div>
</div>
</div>
