Bootstrap Fixed Width Sidebar

Objective: Create a two-column blog layout using Bootstrap 3 with a fixed width right sidebar column and a responsive main content column by using custom grid classes.

At the time of writing, this site is using a custom built theme based on Bootstrap 3 with a fixed width sidebar. The sidebar will have a fixed width of 350 pixels on devices with a minimum screen width of 768px and above. On mobile devices (<768px), it will be set to 100% width.

To implement the fixed width sidebar on Bootstrap, we need to create 2 new CSS grid styles: col-fluid and col-fixed. These two grid classes will be used instead of the Bootstrap’s default col-* classes.

col-fixed will be used for the sidebar and col-fluid will be used for the main content.

In the CSS stylesheet file, define the 2 grid styles.

The above styles will be used under mobile view. You will then need to use media queries to overwrite the col-fixed and col-fluid grid classes based on the Bootstrap breakpoint sizes.

On your HTML file, use the col-fixed and col-fluid grid classes for the two columns.

I have created a template over at GitLab. You can find it here.

ibrahim = { interested_in(unix, linux, android, open_source, reverse_engineering); coding(c, shell, php, python, java, javascript, nodejs, react); plays_on(xbox, ps4); linux_desktop_user(true); }