Layout Helpers

These modular elements can be readily used and customized in every layout across pages.

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.

.w-100
.w-75
.w-50
.w-25
.h-100
.h-75
.h-50
.h-25
Special height classes

Height utilities that apply to all breakpoints, from xs to xl. The classes are named using the format {property}-{size} for xs and {property}-{breakpoint}-{size} for sm, md, lg and xl. Example: .mh-100vh or .mh-md-100vh

The properties are following:
.mh-100vh { max-height: 100vh; }
.mh-75vh { max-height: 75vh; }
.mh-50vh { max-height: 50vh; }
.mh-25vh { max-height: 25vh; }
.minh-100vh { min-height: 100vh; }
.minh-75vh { min-height: 75vh; }
.minh-50vh { min-height: 50vh; }
.minh-25vh { min-height: 25vh; }
.h-100vh { height: 100vh !important; }
.h-75vh { height: 75vh !important; }
.h-50vh { height: 50vh !important; }
.h-25vh { height: 25vh !important; }