Layouts / Layout options

You can configure the initial layout by setting control classes to the html element. See also layout helpers.

<html class="layout-fixed layout-collapsed">
  ...
</html>
After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc.
.layout-reversed
Reverse layout direction without markup change.
.layout-expanded
Expand layout sidenav on small screens (< 992px).
.layout-collapsed
Collapse layout sidenav on large screens (>= 992px).
.layout-offcanvas
Make layout sidenav offcanvas.
.layout-fixed
Set layout position to fixed.
.layout-fixed-offcanvas
Set layout position to fixed with offcanvas sidenav.
.layout-navbar-fixed
Set layout navbar position to fixed.
.layout-footer-fixed
Set layout footer position to fixed.