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

{{ title }}

To change the sidebar size, add any of the following attributes to the .sidebar container. When using the data attributes, it's not required to add any extra CSS classes.

Any screen size

Attribute Description
data-size Configures the default sidebar size on any screen size

Specific screen sizes

Attribute Description
data-size-xs Configures the sidebar size on screens up to 543px wide
data-size-sm Configures the sidebar size on screens between 544px and 767px wide
data-size-md Configures the sidebar size on screens between 768px and 991px wide
data-size-lg Configures the sidebar size on screens between 992px and 1199px wide
data-size-xl Configures the sidebar size on screens larger than 1199px wide
data-size-sm-up Configures the sidebar size on screens larger than 543px wide
data-size-md-up Configures the sidebar size on screens larger than 767px wide
data-size-lg-up Configures the sidebar size on screens larger than 991px wide
data-size-xl-up Configures the sidebar size on screens larger than 1199px wide

Fixed width sizes

The following values can be used with any of the data-size* attributes and will apply a fixed width to the sidebar container.
Value Description Default
1 Makes the sidebar 56px wide
2 Makes the sidebar 200px wide
3 Makes the sidebar 250px wide check_circle
{% include 'code/sidebar/size.html' %}

Fluid width sizes

The following values can be used with any of the data-size* attributes and will apply a fluid width to the sidebar container.
Value Description
20% Makes the sidebar 20% wide
25% Makes the sidebar 25% wide
30% Makes the sidebar 30% wide
35% Makes the sidebar 35% wide
40% Makes the sidebar 40% wide
45% Makes the sidebar 45% wide
50% Makes the sidebar 50% wide
55% Makes the sidebar 55% wide
60% Makes the sidebar 60% wide
65% Makes the sidebar 65% wide
70% Makes the sidebar 70% wide
75% Makes the sidebar 75% wide
80% Makes the sidebar 80% wide
85% Makes the sidebar 85% wide
90% Makes the sidebar 90% wide
95% Makes the sidebar 95% wide
100% Makes the sidebar 100% wide
{% include 'code/sidebar/percent.html' %}
To change the sidebar size without JavaScript, you can add the following CSS classes manually to the .sidebar container.

Fixed width sizes

Apply a fixed width to the sidebar container.
CSS Class Description
.sidebar-size-1 Makes the sidebar 56px wide
.sidebar-size-2 Makes the sidebar 200px wide
.sidebar-size-3 Makes the sidebar 250px wide

Fluid width sizes

Apply a fluid width to the sidebar container.
CSS Class Description
.sidebar-size-20pc Makes the sidebar 20% wide on any screen size.
.sidebar-size-25pc Makes the sidebar 25% wide on any screen size.
.sidebar-size-30pc Makes the sidebar 30% wide on any screen size.
.sidebar-size-35pc Makes the sidebar 35% wide on any screen size.
.sidebar-size-40pc Makes the sidebar 40% wide on any screen size.
.sidebar-size-45pc Makes the sidebar 45% wide on any screen size.
.sidebar-size-50pc Makes the sidebar 50% wide on any screen size.
.sidebar-size-55pc Makes the sidebar 55% wide on any screen size.
.sidebar-size-60pc Makes the sidebar 60% wide on any screen size.
.sidebar-size-65pc Makes the sidebar 65% wide on any screen size.
.sidebar-size-70pc Makes the sidebar 70% wide on any screen size.
.sidebar-size-75pc Makes the sidebar 75% wide on any screen size.
.sidebar-size-80pc Makes the sidebar 80% wide on any screen size.
.sidebar-size-85pc Makes the sidebar 85% wide on any screen size.
.sidebar-size-90pc Makes the sidebar 90% wide on any screen size.
.sidebar-size-95pc Makes the sidebar 95% wide on any screen size.
.sidebar-size-100pc Makes the sidebar 100% wide on any screen size.
You can customize the sidebar sizes with the following Sass variables.

Fixed width sizes

Sass variable Description Default value
$sidebar-size-1 Defines the sidebar width when using .sidebar-size-1 or data-size="1" 56px
$sidebar-size-2 Defines the sidebar width when using .sidebar-size-2 or data-size="2" 200px
$sidebar-size-3 Defines the sidebar width when using .sidebar-size-3 or data-size="3" 250px

Fluid width sizes

Sass variable Description Default value
$sidebar-percent-from Defines the minimum sidebar size for generating the percentage based sidebar size CSS classes 20
$sidebar-percent-through Defines the maximum sidebar size for generating the percentage based sidebar size CSS classes 100
$sidebar-percent-step Defines the increment value used for generating the percentage based sidebar size CSS classes 5

Sidebar mini

Sidebar utility class to adjust the sidebar content such as text and menus when using .sidebar-size-1 or data-size="1".
CSS Class Description
.sidebar-mini The .sidebar-mini class must be used together with the .sidebar-size-1 class or with the data-size="1" data attribute.
{% include 'code/sidebar/mini.html' %}
Sass variable Description Default value
$sidebar-mini-width Defines the sidebar width when using .sidebar-mini $sidebar-width-1

Sidebar reveal

CSS Class Description
.sidebar-reveal Reveals the sidebar on mouse over and retracts the sidebar to it's original placement on mouse out.
The .sidebar-reveal class must be used together with the .sidebar-size-1 class or with the data-size="1" attribute.
.sidebar-reveal-size-2 Makes a .sidebar-reveal element 200px wide.
.sidebar-reveal-size-3 Makes a .sidebar-reveal element 250px wide.
{% include 'code/sidebar/reveal.html' %}
{% endblock %}