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

Sizing on Bootstrap

##### Width (relative to parent)

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

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

##### Height (relative to parent)

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

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

##### Special classes (relative to viewport)

Responsive variations also exist for sizing classes relative to the `viewport`. Here are all the support classes:

    .mw-100 { max-width: 100%; }
    .min-vw-100 { min-width: 100vw; }
    .vw-100 { width: 100vw; }
    .max-vh-100 { max-height: 100vh; }
    .max-vh-75 { max-height: 75vh; }
    .max-vh-50 { max-height: 50vh; }
    .max-vh-25 { max-height: 25vh; }
    .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; }
    .max-vh-sm-100 { max-height: 100vh; }
    .max-vh-sm-75 { max-height: 75vh; }
    .max-vh-sm-50 { max-height: 50vh; }
    .max-vh-sm-25 { max-height: 25vh; }
    .min-vh-sm-100 { min-height: 100vh; }
    .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; }
    .max-vh-md-100 { max-height: 100vh; }
    .max-vh-md-75 { max-height: 75vh; }
    .max-vh-md-50 { max-height: 50vh; }
    .max-vh-md-25 { max-height: 25vh; }
    .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; }
    .max-vh-lg-100 { max-height: 100vh; }
    .max-vh-lg-75 { max-height: 75vh; }
    .max-vh-lg-50 { max-height: 50vh; }
    .max-vh-lg-25 { max-height: 25vh; }
    .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; }
    .max-vh-xl-100 { max-height: 100vh; }
    .max-vh-xl-75 { max-height: 75vh; }
    .max-vh-xl-50 { max-height: 50vh; }
    .max-vh-xl-25 { max-height: 25vh; }
    .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; }
    .max-vh-xxl-100 { max-height: 100vh; }
    .max-vh-xxl-75 { max-height: 75vh; }
    .max-vh-xxl-50 { max-height: 50vh; }
    .max-vh-xxl-25 { max-height: 25vh; }
    .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; }

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize