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

{{ title }}

{% markdown %} ## Usage ### Via data attributes > 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. {% endmarkdown %}
Value Description Default
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 or xl-up 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
none Hides the sidebar by default on any screen size
{% include 'code/data-attributes/sidebar-visibility.html' %}
{% markdown %} ## CSS reference > 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. {% endmarkdown %}
CSS Class Description
.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 or .sidebar-visible-xl-up Displays the sidebar on screens larger than 1199px wide
.sidebar-visible-xs-up or .sidebar-visible 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
{% endblock %}