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 is a technology enthusiast with a keen interest in *NIX (Unix, Linux) systems, Android, open source and other tech related stuff. When his cpu load is low, you can probably find him online playing on his Xbox or PlayStation.