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 |