## Sizing

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

Sizing on Bootstrap

#### Width (relative to parent)

    <div class="bg-body-highlight p-2 border-dashed mb-3 w-100"><code>.w-100</code></div>
    <div class="bg-body-highlight p-2 border-dashed mb-3 w-75"><code>.w-75</code></div>
    <div class="bg-body-highlight p-2 border-dashed mb-3 w-50"><code>.w-50</code></div>
    <div class="bg-body-highlight p-2 border-dashed mb-3 w-25"><code>.w-25</code></div>
    <div class="bg-body-highlight p-2 border-dashed mb-3 w-auto"><code>.w-auto</code></div>

`.w-100`
`.w-75`
`.w-50`
`.w-25`
`.w-auto`

#### Height (relative to parent)

    <div class="vh-50 py-3">
      <div class="row h-100">
        <div class="col">
          <div class="bg-body-highlight p-2 border-dashed mb-3 h-100"><code>.h-100</code></div>
        </div>
        <div class="col">
          <div class="bg-body-highlight p-2 border-dashed mb-3 h-75"><code>.h-75</code></div>
        </div>
        <div class="col">
          <div class="bg-body-highlight p-2 border-dashed mb-3 h-50"><code>.h-50</code></div>
        </div>
        <div class="col">
          <div class="bg-body-highlight p-2 border-dashed mb-3 h-25"><code>.h-25</code></div>
        </div>
        <div class="col">
          <div class="bg-body-highlight p-2 border-dashed mb-3 h-auto"><code>.h-auto</code></div>
        </div>
      </div>
    </div>

`.h-100`
`.h-75`
`.h-50`
`.h-25`
`.h-auto`

#### Special classes (relative to viewport)

    <pre class="rounded-3"><code class="lang-css">.mw-100 { max-width: 100%; }
    .min-vw-100 { min-width: 100vw; }
    .vw-100 { width: 100vw; }
    .min-vh-100 { min-height: 100vh; }
    .min-vh-75 { min-height: 75vh; }
    .min-vh-50 { min-height: 50vh; }
    .min-vh-25 { min-height: 25vh; }
    .vh-100 { height: 100vh !important; }
    .vh-75 { height: 75vh !important; }
    .vh-50 { height: 50vh !important; }
    .vh-25 { height: 25vh !important; }
    .min-vh-sm-75 { min-height: 75vh; }
    .min-vh-sm-50 { min-height: 50vh; }
    .min-vh-sm-25 { min-height: 25vh; }
    .vh-sm-100 { height: 100vh !important; }
    .vh-sm-75 { height: 75vh !important; }
    .vh-sm-50 { height: 50vh !important; }
    .vh-sm-25 { height: 25vh !important; }
    .min-vh-md-100 { min-height: 100vh; }
    .min-vh-md-75 { min-height: 75vh; }
    .min-vh-md-50 { min-height: 50vh; }
    .min-vh-md-25 { min-height: 25vh; }
    .vh-md-100 { height: 100vh !important; }
    .vh-md-75 { height: 75vh !important; }
    .vh-md-50 { height: 50vh !important; }
    .vh-md-25 { height: 25vh !important; }
    .min-vh-lg-100 { min-height: 100vh; }
    .min-vh-lg-75 { min-height: 75vh; }
    .min-vh-lg-50 { min-height: 50vh; }
    .min-vh-lg-25 { min-height: 25vh; }
    .vh-lg-100 { height: 100vh !important; }
    .vh-lg-75 { height: 75vh !important; }
    .vh-lg-50 { height: 50vh !important; }
    .vh-lg-25 { height: 25vh !important; }
    .min-vh-xl-100 { min-height: 100vh; }
    .min-vh-xl-75 { min-height: 75vh; }
    .min-vh-xl-50 { min-height: 50vh; }
    .min-vh-xl-25 { min-height: 25vh; }
    .vh-xl-100 { height: 100vh !important; }
    .vh-xl-75 { height: 75vh !important; }
    .vh-xl-50 { height: 50vh !important; }
    .vh-xl-25 { height: 25vh !important; }
    .min-vh-xxl-100 { min-height: 100vh; }
    .min-vh-xxl-75 { min-height: 75vh; }
    .min-vh-xxl-50 { min-height: 50vh; }
    .min-vh-xxl-25 { min-height: 25vh; }
    .vh-xxl-100 { height: 100vh !important; }
    .vh-xxl-75 { height: 75vh !important; }
    .vh-xxl-50 { height: 50vh !important; }
    .vh-xxl-25 { height: 25vh !important; }</code></pre>

    .mw-100 { max-width: 100%; }
    .min-vw-100 { min-width: 100vw; }
    .vw-100 { width: 100vw; }
    .min-vh-100 { min-height: 100vh; }
    .min-vh-75 { min-height: 75vh; }
    .min-vh-50 { min-height: 50vh; }
    .min-vh-25 { min-height: 25vh; }
    .vh-100 { height: 100vh !important; }
    .vh-75 { height: 75vh !important; }
    .vh-50 { height: 50vh !important; }
    .vh-25 { height: 25vh !important; }
    .min-vh-sm-75 { min-height: 75vh; }
    .min-vh-sm-50 { min-height: 50vh; }
    .min-vh-sm-25 { min-height: 25vh; }
    .vh-sm-100 { height: 100vh !important; }
    .vh-sm-75 { height: 75vh !important; }
    .vh-sm-50 { height: 50vh !important; }
    .vh-sm-25 { height: 25vh !important; }
    .min-vh-md-100 { min-height: 100vh; }
    .min-vh-md-75 { min-height: 75vh; }
    .min-vh-md-50 { min-height: 50vh; }
    .min-vh-md-25 { min-height: 25vh; }
    .vh-md-100 { height: 100vh !important; }
    .vh-md-75 { height: 75vh !important; }
    .vh-md-50 { height: 50vh !important; }
    .vh-md-25 { height: 25vh !important; }
    .min-vh-lg-100 { min-height: 100vh; }
    .min-vh-lg-75 { min-height: 75vh; }
    .min-vh-lg-50 { min-height: 50vh; }
    .min-vh-lg-25 { min-height: 25vh; }
    .vh-lg-100 { height: 100vh !important; }
    .vh-lg-75 { height: 75vh !important; }
    .vh-lg-50 { height: 50vh !important; }
    .vh-lg-25 { height: 25vh !important; }
    .min-vh-xl-100 { min-height: 100vh; }
    .min-vh-xl-75 { min-height: 75vh; }
    .min-vh-xl-50 { min-height: 50vh; }
    .min-vh-xl-25 { min-height: 25vh; }
    .vh-xl-100 { height: 100vh !important; }
    .vh-xl-75 { height: 75vh !important; }
    .vh-xl-50 { height: 50vh !important; }
    .vh-xl-25 { height: 25vh !important; }
    .min-vh-xxl-100 { min-height: 100vh; }
    .min-vh-xxl-75 { min-height: 75vh; }
    .min-vh-xxl-50 { min-height: 50vh; }
    .min-vh-xxl-25 { min-height: 25vh; }
    .vh-xxl-100 { height: 100vh !important; }
    .vh-xxl-75 { height: 75vh !important; }
    .vh-xxl-50 { height: 50vh !important; }
    .vh-xxl-25 { height: 25vh !important; }

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize