Layouts overview
Limitless includes 6 different layouts: 1 main layout with all components and options, 5 child layouts with layout options only. This is done for easier maintenance and reduced bundle size. All components from the main layout are also available in all other layouts, CSS and JS configurations are included in all of them by default. 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, dark or transparent; breadcrumbs can be placed on top, bottom or as a component. This layout is based on scrollable containers, this means the html and body have overflow: hidden; property that disables default document scrollbar and enables independent scrollbars in each layout section, making the entire layout fixed/sticky. This approach was chosen to support very complex layouts. This is the default option in version 4.0, but static layout is also supported and now requires class="layout-static" added to html tag. |
| 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 are not displayed. This layout is also based on scrollable containers. Standard static layout is also supported. |
| 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. This layout is not based on scrollable containers, but supports the default document behaviour. |
| 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. Breadcrumb line is removed, but still can be used since functionality remains the same. This layout is not based on scrollable containers, but supports the default document behaviour. |
| Layout 5 | Similar to layout 4, but has a different 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. This layout is not based on scrollable containers, but supports the default document behaviour. |
| Layout 6 | New layout that supports both vertical and horizontal navigations. By default it has centered scrollable horizontal navigation located in top navigation bar, which moves to the second line on small screens and becomes scrollable. Primary navigation levels are based on responsive tabs and grid and supports only 3 levels. Content area has fixed width and all sidebars are aligned to the left/right edges of the window. This layout is also based on scrollable containers. |
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:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-lg navbar-dark navbar-static">
...
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header page-header-light shadow">
...
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
...
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->
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.container 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 assets/scss/layouts/[layout]/layout/ folder.
Boxed page markup example:
<!-- Boxed layout -->
<body class="layout-boxed-bg">
<!-- Boxed layout wrapper -->
<div class="layout-boxed container px-0">
...
</div>
<!-- / boxed layout wrapper -->
</body>
<!-- /boxed layout -->
Boxed content markup example:
<!-- Boxed content -->
<body>
...
<!-- Content area -->
<div class="content container">
...
</div>
<!-- /content area -->
...
</body>
<!-- /boxed content -->
Layout 2
Overview
Second layout uses same markup as the first one, but some components have different default styling and location: sidebar component includes additional section, which includes 2 types of logos (icon and text) and action buttons to control sidebar visibility; 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:
<!-- 4 columns layout -->
<body>
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Main navbar -->
<div class="navbar navbar-expand-lg navbar-light navbar-static">
...
</div>
<!-- /main navbar -->
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content pt-0">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
...
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->
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.container 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 assets/scss/layouts/[layout]/layout/ folder.
Boxed page markup example:
<!-- Boxed layout -->
<body class="layout-boxed-bg">
<!-- Boxed layout wrapper -->
<div class="layout-boxed container px-0">
...
</div>
<!-- / boxed layout wrapper -->
</body>
<!-- /boxed layout -->
Boxed content markup example:
<!-- Boxed content -->
<body>
...
<!-- Content area -->
<div class="content container pt-0">
...
</div>
<!-- /content area -->
...
</body>
<!-- /boxed content -->
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. Also in first 2 layouts footer markup is placed right after <div class="content">...</div> container. 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:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-lg navbar-dark navbar-static">
...
</div>
<!-- /main navbar -->
<!-- Breadcrumb line -->
<div class="page-header page-header-light shadow">
...
</div>
<!-- /breadcrumb line -->
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content pt-0">
<!-- Main sidebar -->
<div class="sidebar sidebar-light sidebar-main sidebar-expand-lg align-self-start">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg align-self-start">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Content area -->
<div class="content-wrapper">
...
</div>
<!-- /content area -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg align-self-start">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
...
</div>
<!-- /footer -->
</body>
<!-- /4 columns layout -->
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-dark navbar-expand-lg">
<div class="container px-lg-3">
...
</div>
</div>
<!-- /main navbar -->
<!-- Breadcrumb line -->
<div class="page-header-light shadow">
<div class="page-header-content container d-lg-flex">
...
</div>
</div>
<!-- /breadcrumb line -->
<!-- Page header -->
<div class="page-header">
<div class="page-header-content container d-lg-flex">
...
</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:
<!-- Basic layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg navbar-static">
...
</div>
<!-- /main navbar -->
<!-- Navigation navbar -->
<div class="navbar navbar-sm shadow">
...
</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-sm navbar-footer border-top">
...
</div>
<!-- /footer -->
</body>
<!-- /basic layout -->
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:
<!-- Boxed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
<div class="container px-lg-3">
...
</div>
</div>
<!-- /main navbar -->
<!-- Navigation navbar -->
<div class="navbar navbar-sm shadow">
<div class="container px-lg-3">
...
</div>
</div>
<!-- /navigation navbar -->
<!-- Page header -->
<div class="page-header">
<div class="page-header-content container d-lg-flex">
...
</div>
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container pt-0">
...
</div>
<!-- /page content -->
...
</body>
<!-- /boxed layout -->
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:
<!-- Basic layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg navbar-static px-lg-0">
<div class="container-fluid container-boxed jusitfy-content-start">
...
</div>
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header page-header-dark text-white">
<div class="page-header-content container-boxed d-lg-flex">
...
</div>
</div>
<!-- /page header -->
<!-- Secondary navbar -->
<div class="navbar navbar-dark px-lg-0">
<div class="container-fluid container-boxed position-relative">
<!-- Navbar content -->
<div class="flex-fill overflow-auto overflow-lg-visible scrollbar-hidden">
...
</div>
<!-- /navbar content -->
<!-- Floating menu -->
<div class="fab-menu fab-menu-absolute fab-menu-top fab-menu-top-end d-none d-lg-block" data-fab-toggle="click" data-fab-state="closed">
...
</div>
<!-- /floating menu -->
</div>
</div>
<!-- /secondary navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
<div class="container-fluid container-boxed">
...
</div>
</div>
<!-- /footer -->
</body>
<!-- /basic layout -->
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:
<!-- Boxed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg navbar-static">
<div class="container jusitfy-content-start px-lg-3">
...
</div>
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header page-header-dark text-white">
<div class="page-header-content container d-lg-flex">
...
</div>
</div>
<!-- /page header -->
<!-- Secondary navbar -->
<div class="navbar navbar-dark">
<div class="container position-relative px-lg-3">
<!-- Navbar content -->
<div class="flex-fill overflow-auto overflow-lg-visible scrollbar-hidden">
...
</div>
<!-- /navbar content -->
<!-- Floating menu -->
<div class="fab-menu fab-menu-absolute fab-menu-top fab-menu-top-end d-none d-lg-block" data-fab-toggle="click" data-fab-state="closed">
...
</div>
<!-- /floating menu -->
</div>
</div>
<!-- /secondary navbar -->
<!-- Page content -->
<div class="page-content container">
<!-- Main content -->
<div class="content-wrapper">
...
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
<div class="container px-lg-3">
...
</div>
</div>
<!-- /footer -->
</body>
<!-- /boxed layout -->
Layout 6
Overview
Layout 6 is a mix of various section combinations - content area has fixed width, while other parts take all available horizontal space. Navigation is horizontal, but can be combined with vertical in multiple levels. Markup is very much similar to layout 1, but logic of main navbar is completely different. All 5 sidebars can be used on any page, along with other components. Navigation is unique to this layout and is fully responsive and very well thought out. This is by far the most flexible layout.
Full width markup
Example below demonstrates basic full width - 1 top navbar with main navigation and main content area:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-xl navbar-static shadow">
...
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-light sidebar-main sidebar-expand-lg sidebar-main-resized">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header">
...
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content container pt-0">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
...
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->
Fixed width markup
Boxed layout here is slightly different from others since content container has width width by default. But the entire layout can be boxed as well, some padding adjustments may be required though for the pixel perfect mobile layout. Here is a basic example:
Boxed layout markup example:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-xl navbar-static shadow">
<div class="container px-sm-3">
...
</div>
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main content -->
<div class="content-wrapper">
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header">
<div class="page-header-content container d-lg-flex">
...
</div>
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content container pt-0">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
<div class="container px-sm-3">
...
</div>
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->