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.

.col-fixed { position:relative; min-height:1px; padding-right:15px; padding-left:15px; float:left; width:100%; }

.col-fluid { position:relative; min-height:1px; padding-right:15px; padding-left:15px; float:left; width:100%; }

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.

@media (min-width: 768px) and (max-width: 991px) {

.col-fixed { width:350px; }

.col-fluid { width:calc(100% - 350px);}

}

@media (min-width: 992px) and (max-width: 1199px) {

.col-fixed { width:350px; }

.col-fluid { width:calc(100% - 350px);}

}

@media (min-width: 1200px) {

.col-fixed { width:350px; }

.col-fluid { width:calc(100% - 350px);}

}

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

<!doctype html>

<body>

<p>main content</p>

</div>

<p>sidebar</p>

</div>

</div>

</div>

</body>

</html>

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

Mohamed Ibrahim

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); }