logologo-dark

Sizing Utility

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

Set a Width

These utility classes allow to set width of an element instantly.

25%
50%
75%
100%
Percent WidthValue
.w-{value}15 | 20 | 25 | 30 | ... | 85 | 90 | 95 | 100 (step of 5)
Use-case WidthValue
.wide-{value}xs | sm | md | lg | xl
These classes mostly used with .container to specific width on any larger screens.
Specific WidthValue
.w-{value}80px | 90px | 100px | 110px | 120px | 125px | 130px | 140px | 150px | 175px | 200px | 220px | 225px | 250px | 300px | 350px | 400px | 550px
.w-max-{value}Same as above
.w-min-{value}Same as above
Full WidthValue
.w-{value}auto | 100auto use for reset
.w-max-{value}auto | 100auto use for reset
.w-min-{value}auto | 100auto use for reset
.mw-100 Same as .w-max-100
Uses Example
<div class="w-25"> ... </div><div class="w-max-250px"> ... </div><div class="w-min-100px"> ... </div>

Set a Height

These utility classes allow to set width of an element instantly.

25%
50%
75%
100%
Percent HeightValue
.h-{value}25 | 50 | 75 | 100 | auto
.mh-100Set max height 100%
Specific HeightValue
.h-{value}100px | 150px | 175px | 200px | 225px | 250px | 275px | 300px | 325px | 350px | 375px | 400px | 425px | 450px | 475px | 500px
.h-max-{value}Same as above
.h-min-{value}Same as above
Uses Example
<div class="h-25"> ... </div><div class="h-250px"> ... </div><div class="h-min-325px"> ... </div>

Relative to the viewport

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

Class ReferenceDetails
.vh-100Height set 100vh
.vw-100Width set 100vw
.min-vh-100Height set min 100vh
.min-vw-100Width set min 100vw
Uses Example
<div class="vh-100"> ... </div>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Shady
Clean
Apps Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Blue Light
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?