The sidebar layout used in the framework relies on Bootstrap's column classes. It is a 12 column grid and can stack a different screen widths. In addition, we can adjust the gutter size between the columns.
When working with the size of the sidebar, you also want to keep in mind the content area column as well. Bootstrap columns are composed of a 12 column grid. Therefore, both sides, the content area and sidebar, must equal 12. The default setup of the sidebar and content columns are:
- Content: 8
- Sidebar: 4
- Breakpoint: sm
- Gutter: 60
Adjusting the size of the sidebar and content column
The filter you want to use is bne_sidebar_layout_width. This returns a two digit value separated by a dash (-).
Notice that the return argument is "8-4". When added together this will equal to 12. The first number corresponds to the content column and the second number is the sidebar column.
To make the sidebar a smaller and the content area wider. All we need to do is replace "8-4" with a new set.
Adjust when the sidebar and content area columns stack
Here you want to use the filter, bne_sidebar_layout_responsive. This returns the responsive breakpoint css class used in Bootstrap. The available options are: xs, sm, md, and lg.
The default behavior is to stack the columns at "sm" which relates to small devices and tablets (≥768px). If you wanted to stack them at a higher screen size (md), then you would use the filter in the following way:
Increase the gutter or spacing between the content and sidebar
Finally, you can also increase or decrease the gutter between both columns using the filter bne_sidebar_layout_gutter. The default value is 60.
Important note, this value will correspond to the padding of both sides of the column (padding-left and padding-right), divided by 2. Therefore if the value you set is 100, then the filter will apply 50px padding to the left and the right sides of both columns. In other words, the left column will have padding-right: 50px and the right column will have padding-left: 50px. Together this will equal 100px which is your set gutter width.