DashByte - Premium Dashboard Template

Utilities

Sizing

Easily make an element as wide or as tall with our width and height utilities. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Set a Width

Use width utilities to quickly style the width of an element. Great for cards, buttons, or any other element.

25% width

50% width

75% width

100% width

auto width

<div class="w-25 p-2 bg-secondary text-white text-center">25% width</div>
<div class="w-50 p-2 bg-secondary text-white text-center mt-2">50% width</div>
<div class="w-75 p-2 bg-secondary text-white text-center mt-2">75% width</div>
<div class="w-100 p-2 bg-secondary text-white text-center mt-2">100% width</div>
<div class="w-auto p-2 bg-secondary text-white text-center mt-2">auto width</div>

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

<div class="min-vw-100">Min-width 100vw</div>
<div class="vw-100">Width 100vw</div>

Set a Height

Use height utilities to quickly style the height of an element. Great for cards, buttons, or any other element.

25% height

50% height

75% height

100% height

auto height

<div class="row g-1 px-1 border ht-250">
  <div class="col"><div class="h-25 p-2 bg-secondary text-white text-center">25% height</div></div>
  <div class="col"><div class="h-50 p-2 bg-secondary text-white text-center">50% height</div></div>
  <div class="col"><div class="h-75 p-2 bg-secondary text-white text-center">75% height</div></div>
  <div class="col"><div class="h-100 p-2 bg-secondary text-white text-center">100% height</div></div>
  <div class="col"><div class="h-auto p-2 bg-secondary text-white text-center">auto height</div></div>
</div>

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

<div class="min-vh-100">Min-height 100vh</div>
<div class="vh-100">Height 100vh</div>

Shaira Diaz

Sizing

Set a Width

Set a Height