Layouts overview
flexbox. This solution makes perfect sense: it's very flexible in terms of markup and structure - you can easily add as many columns as you need using proper classes. And Bootstrap 4 is based on it. All sidebars and content area fill up all available space underneath, all sidebars have fixed 270px width, main sidebar can be collapsed or completely hidden. Depending on layout type, markup slightly differs.
Table below describes all layout types available:
| Layout | Description |
|---|---|
| Layout 1 | Base layout. By default contains sidebar and navbar in dark colors, content area has default <body>'s light grey background color. Default styling of components can be changed: sidebars and navbars include different color and styling options; page header can be either white or transparent; breadcrumbs can be placed on top, bottom or as a component. |
| Layout 2 | Similar to layout 1, but has a bit different defaults - navbar is white by default, but navbar header background color is similar to sidebar's color. Page header has different default styling and is transparent, breadcrumb appears as a component by default and placed after page header content. |
| Layout 3 | Detached layout. All sidebars appears as separate components and have side spacings. Page header is transparent by default and is full width - placed outside content are right after navbars. Breadcrumb line is moved outside page header and placed after navbar and before page header content. |
| Layout 4 | Full width 1 column layout with horizontal navigation. By default doesn't have any sidebars, but they can be added as alternative content to the content area. Page header is transparent by default and breadcrumb component appears as a part of page title. Breadcrumb line is removed, but still can be used since functionality remains the same. |
| Layout 5 | Similar to layout 4, but has much better design choice - big dark page header with 2 navigations, including full width multi level mega menu. Sidebars are optional, as well as breadcrumbs. Page header contains search field on the right hand side and a floating action button with sliding dropdown menu. |
Layout 1
Overview
First layout is considered as main, all other layouts use this one as a base. It supports up to 4 columns in different combinations: sidebar + content; main sidebar + secondary sidebar + content; main sidebar + secondary sidebar + content + right sidebar; main sidebar + content + right sidebar etc. Main and secondary sidebars can be swapped. All structure variations are markup dependent, this means you need to insert layout parts to the layout and add a proper class to them, no need to add/remove/change any classes elsewhere.
Full width markup
Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:
<!-- Liquid layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark">
...
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-main">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-md">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-expand-md navbar-light">
...
</div>
<!-- /footer -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-right sidebar-expand-md">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
Fixed width markup
Markup of the boxed (or fixed width) layout is the same, the only difference is 2 additional class names: .layout-boxed-bg adds background image to the document body; .layout-boxed class adds proper spacing to content area, page header, breadcrumbs and navbars. You can use either darker background color added to the body element in CSS, or any background image, it's up to you. Styles for body element you can find in _boxed.scss file located in global_assets/scss/layouts/[layout]/[theme]/layout/ folder.
Boxed layout markup example:
<!-- Boxed layout -->
<body class="layout-boxed-bg">
<!-- Boxed layout wrapper -->
<div class="d-flex flex-column flex-1 layout-boxed">
...
</div>
<!-- / boxed layout wrapper -->
</body>
<!-- /boxed layout -->
Layout 2
Overview
Second layout uses same markup as the first one, but some components have different default styling: navbar component includes additional .navbar-header component which includes 2 types of logos and adds background color to the logo area; page header component has different default styling to avoid extra classes added to their containers.
Full width markup
Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:
<!-- Liquid layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark">
<!-- Header with logos -->
<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
<div class="navbar-brand navbar-brand-md">
...
</div>
<div class="navbar-brand navbar-brand-xs">
...
</div>
</div>
<!-- /header with logos -->
...
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-main">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-md">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-expand-md navbar-light">
...
</div>
<!-- /footer -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-right sidebar-expand-md">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
Fixed width markup
Boxed width markup of second layout is the same as in first layout, without additions and changes. To use fixed width, add .layout-boxed-bg class to the <body> tag to add optional background image and .layout-boxed class along with flexbox utility classesd that add proper spacing to content area, page header, breadcrumbs and navbars. You can use either darker background color added to the body element in CSS, or any background image, it's up to you. Styles for body element you can find in _boxed.scss file located in global_assets/scss/layouts/[layout]/[theme]/layout/ folder.
Boxed layout markup example:
<!-- Boxed layout -->
<body class="layout-boxed-bg">
<!-- Boxed layout wrapper -->
<div class="d-flex flex-column flex-1 layout-boxed">
...
</div>
<!-- / boxed layout wrapper -->
</body>
<!-- /boxed layout -->
Layout 3
Overview
Third layout's structure is different from the first and second variations. Here page header component is moved outside .page-content container and placed right after main navbar component. All sidebars remain on the same position, but appear as detached stand-alone components. In this version sidebars don't have a .sidebar-content option as they are detached by default. Also in first 2 layouts footer markup is placed inside <div class="content">...</div> container after all content. In this layout footer isn't covered or pushed by sidebar, so that despite number of sidebars, footer always appears at the very bottom.
Full width markup
Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:
<!-- Liquid layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark">
...
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content pt-0">
<!-- Main sidebar -->
<div class="sidebar sidebar-main">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-secondary">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-right">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-expand-md navbar-light">
...
</div>
<!-- /footer -->
</body>
Fixed width markup
In 3rd layout version, boxed layout needs additional markup changes. You need to wrap inner content of navbar, page header and breadcrumb line in <div class="container" /> wrapper and add .container class to .page-content container. In this version body doesn't include any background images, it uses containers mentioned earlier to center content in components, but keep components themself full width.
Boxed layout markup example:
<!-- Fixed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark">
<!-- Boxed container -->
<div class="container">
...
</div>
<!-- /boxed container -->
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header">
<div class="breadcrumb-line breadcrumb-line-light px-0">
<div class="container header-elements-md-inline">
...
</div>
</div>
<div class="page-header-content container header-elements-md-inline">
...
</div>
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container pt-0">
...
</div>
<!-- /page content -->
...
</body>
Layout 4
Overview
Fourth layout structure is the same as in third, the only difference is by default it doesn't have any sidebars and uses multiple navbars for navigation, so called "Horizontal navigation layout". Although by default sidebars aren't presented, the functionality remains the same - sidebars can be used in any page, but the importance is much lower, means they can be used for alternative page navigation or page content. Instead, navbar navigation supports multiple child levels.
Full width markup
Example below demonstrates basic full width - 2 top navbar and main content area:
<!-- Liquid layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-inverse">
...
</div>
<!-- /main navbar -->
<!-- Navigation navbar -->
<div class="navbar navbar-expand-md navbar-light">
...
</div>
<!-- /navigation navbar -->
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content pt-0">
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-expand-md navbar-light">
...
</div>
<!-- /footer -->
</body>
</body>
Fixed width markup
In 4th layout version, boxed layout completely replicates 3rd layout. You need to wrap inner content of navbar, page header and breadcrumb line in <div class="container" /> wrapper and add .container class to .page-content container. In this version body doesn't include any background images, it uses containers mentioned earlier to center content in components, but keep components themself full width.
Boxed layout markup example:
<!-- Fixed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark">
<!-- Boxed container -->
<div class="container">
...
</div>
<!-- /boxed container -->
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header">
<div class="breadcrumb-line breadcrumb-line-light px-0">
<div class="container header-elements-md-inline">
...
</div>
</div>
<div class="page-header-content container header-elements-md-inline">
...
</div>
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container pt-0">
...
</div>
<!-- /page content -->
...
</body>
Layout 5
Overview
Fifth layout is similar to 4th with a few exceptions: main and secondary navbars and page header have dark background color. And floating action button is a part of layout. Markup is slightly different - 2 navbars and floating action button are placed inside page header. Although by default sidebars aren't presented, the functionality remains the same - sidebars can be used in any page, but the importance is much lower, means they can be used for alternative page navigation or page content. Instead, navbar navigation supports multiple child levels.
Full width markup
Example below demonstrates basic full width - 2 top navbar and main content area:
<!-- Liquid layout -->
<body>
<!-- Page header -->
<div class="page-header page-header-dark">
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark border-transparent">
<div class="container">
...
</div>
</div>
<!-- /main navbar -->
<!-- Page header content -->
<div class="page-header-content header-elements-md-inline">
...
</div>
<!-- /page header content -->
<!-- Secondary navbar -->
<div class="navbar navbar-expand-md navbar-dark border-top-0">
...
</div>
<!-- /secondary navbar -->
<!-- Floating menu -->
<ul class="fab-menu fab-menu-absolute fab-menu-top-right" data-fab-toggle="click">
...
</ul>
<!-- /floating menu -->
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container">
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-expand-md navbar-light">
<div class="container">
...
</div>
</div>
<!-- /footer -->
</body>
</body>
Fixed width markup
In 5th layout version, boxed layout completely replicates 3rd and 4th layouts. You need to wrap inner content of navbar, page header and breadcrumb line in <div class="container" /> wrapper and add .container class to .page-content container. In this version body doesn't include any background images, it uses containers mentioned earlier to center content in components, but keep components themself full width.
Boxed layout markup example:
<!-- Fixed layout -->
<body>
<!-- Page header -->
<div class="page-header page-header-dark">
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark border-transparent px-0">
<div class="container">
...
</div>
</div>
<!-- /main navbar -->
<!-- Page header content -->
<div class="page-header-content header-elements-md-inline container">
...
</div>
<!-- /page header content -->
<!-- Secondary navbar -->
<div class="navbar navbar-expand-md navbar-dark border-top-0 px-0">
<div class="container position-relative">
...
</div>
</div>
<!-- /secondary navbar -->
<!-- Floating menu -->
<ul class="fab-menu fab-menu-top-right" data-fab-toggle="click">
...
</ul>
<!-- /floating menu -->
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container">
...
</div>
<!-- /page content -->
...
</body>