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

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

@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>
<html lang="en">
    <body>

        <div class="container">
            <div class="row">

                <div class="main-content col-fluid">
                    <p>main content</p>
                </div>

                <div class="sidebar col-fixed">
                    <p>sidebar</p>
                </div>

            </div><!-- /.row -->
        </div><!-- /.container -->

    </body>
</html>

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