--- title: Sidebar visibility slug: sidebar/visibility path: ../ --- {% extends "layouts/default.html" %} {% block page %}

{{ title }}

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/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
{% endblock %}