Layout Helpers

For more Details see Bootstrap Sizing Documentation⟶

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.

Special classes (relative to viewport)

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

.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; }