To change the sidebar visibility, add the data-visible
attribute with any of the following values. When using the data-visible
attribute it's not required to add any extra CSS classes.
Value |
Description |
Default |
none |
Hides the sidebar by default on any screen size |
xs |
Displays the sidebar on screens up to 543px wide |
sm |
Displays the sidebar on screens between 544px and 767px wide |
md |
Displays the sidebar on screens between 768px and 991px wide |
lg |
Displays the sidebar on screens between 992px and 1199px wide |
xl |
Displays the sidebar on screens larger than 1199px wide |
xs-up |
Displays the sidebar on any screen size |
sm-up |
Displays the sidebar on screens larger than 543px wide |
md-up |
Displays the sidebar on screens larger than 767px wide |
check_circle |
lg-up |
Displays the sidebar on screens larger than 991px wide |
xl-up |
Displays the sidebar on screens larger than 1199px wide |
{% include 'code/data-attributes/sidebar-visibility.html' %}
By default, .sidebar
elements are hidden on any screen size. To change the sidebar visibility without JavaScript, you can add the following CSS classes manually to the .sidebar
element.
CSS Class |
Description |
.sidebar-visible |
Displays the sidebar on any screen size |
.sidebar-visible-xs |
Displays the sidebar on screens up to 543px wide |
.sidebar-visible-sm |
Displays the sidebar on screens between 544px and 767px wide |
.sidebar-visible-md |
Displays the sidebar on screens between 768px and 991px wide |
.sidebar-visible-lg |
Displays the sidebar on screens between 992px and 1199px wide |
.sidebar-visible-xl |
Displays the sidebar on screens larger than 1199px wide |
.sidebar-visible-xs-up |
Displays the sidebar on any screen size |
.sidebar-visible-sm-up |
Displays the sidebar on screens larger than 543px wide |
.sidebar-visible-md-up |
Displays the sidebar on screens larger than 767px wide |
.sidebar-visible-lg-up |
Displays the sidebar on screens larger than 991px wide |
.sidebar-visible-xl-up |
Displays the sidebar on screens larger than 1199px wide |