--- title: Sidebar layout slug: sidebar/layout path: ../ --- {% extends "layouts/default.html" %} {% block page %}
The sidebar layout options work hand in hand with the sidebar position, sidebar size and sidebar visibility options and controls the page layout when the sidebar visibility changes by adding and removing CSS classes to the .layout-container
element.
To change the page layout when the sidebar visibility changes, add thedata-layout
attribute with one or more of the following values separated by a space character, to the.sidebar
container. When using thedata-layout
attribute it's not required to manually add the CSS classes to the.layout-container
element.
Value | Description | Default |
---|---|---|
none |
||
xs |
Updates the layout when the sidebar visibility changes on screens up to 543px wide |
|
sm |
Updates the layout when the sidebar visibility changes on screens between 544px and 767px wide |
|
md |
Updates the layout when the sidebar visibility changes on screens between 768px and 991px wide |
|
lg |
Updates the layout when the sidebar visibility changes on screens between 992px and 1199px wide |
|
xl |
Updates the layout when the sidebar visibility changes on screens larger than 1199px wide |
|
xs-up |
Updates the layout when the sidebar visibility changes on any screen size | |
sm-up |
Updates the layout when the sidebar visibility changes on screens larger than 543px wide |
|
md-up |
Updates the layout when the sidebar visibility changes on screens larger than 767px wide |
check_circle |
lg-up |
Updates the layout when the sidebar visibility changes on screens larger than 991px wide |
|
xl-up |
Updates the layout when the sidebar visibility changes on screens larger than 1199px wide |
In the following example, when the sidebar is visible, the .layout-sidebar-l3-md-up
CSS class will be added automatically to the .layout-container
element, and removed when the sidebar is hidden.
To change the page layout when the sidebar visibility changes without JavaScript, you can add the following CSS classes manually to the .layout-container
element.
CSS Class | Description |
---|---|
.layout-sidebar-[l|r][1..3]-xs |
Updates the layout when the sidebar visibility changes on screens up to 543px wide |
.layout-sidebar-[l|r][1..3]-sm |
Updates the layout when the sidebar visibility changes on screens between 544px and 767px wide |
.layout-sidebar-[l|r][1..3]-md |
Updates the layout when the sidebar visibility changes on screens between 768px and 991px wide |
.layout-sidebar-[l|r][1..3]-lg |
Updates the layout when the sidebar visibility changes on screens between 992px and 1199px wide |
.layout-sidebar-[l|r][1..3]-xl |
Updates the layout when the sidebar visibility changes on screens larger than 1199px wide |
.layout-sidebar-[l|r][1..3]-xs-up |
Updates the layout when the sidebar visibility changes on any screen size |
.layout-sidebar-[l|r][1..3]-sm-up |
Updates the layout when the sidebar visibility changes on screens larger than 543px wide |
.layout-sidebar-[l|r][1..3]-md-up |
Updates the layout when the sidebar visibility changes on screens larger than 767px wide |
.layout-sidebar-[l|r][1..3]-lg-up |
Updates the layout when the sidebar visibility changes on screens larger than 991px wide |
.layout-sidebar-[l|r][1..3]-xl-up |
Updates the layout when the sidebar visibility changes on screens larger than 1199px wide |