Independent Column Scrolling – Bootstrap Tutorial

Bootstrap Two Column scrolling with independent vertical scrolling capability. Make Bootstrap grids more capable to scrolling separately and vertically.

Bootstrap as compared to other responsive frameworks becomes, popular HTML5 framework by twitter. You can even try hundreds of techniques to set your template according to design using frameworks. Old type of websites work on frames for vertical scrolling but now it becomes piece of cake to break your HTML pages into sections. Here are the simple steps on how to make independent column scrolling using Bootstrap.

Independent Column Scrolling using Bootstrap

We are making 2 columns a col-sm-8 (assume 80% width) and a col-sm-4 (assume 20% width).  Below is the simple HTML markup.


HTML Markup

<div class="col-sm-8" id="left">
 <p>Left contents</p>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <p>Left contents</p>
 </div>

<div class="col-sm-4" id="right">
 <p>Right contents</p>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <p>Right contents</p>
 </div>

CSS styles will make easy to handle two column scrolling. Both  columns will be independent so it can scroll separately. We add some media query to make it responsive. Other then we  make our Body and HTML tags height 100% so we can see both vertically both column full.

CSS Style

body, html {
 margin: 0;
 overflow: hidden;
 height:100%;
 }

@media (min-width: 768px){
 #left {
 position: absolute;
 top: 0px;
 bottom: 0;
 left: 0;
 width: 75%;
 overflow-y: scroll;
 }

#right {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 overflow-y: scroll;
 width: 25%;
 }
 }

#left {
 background-color: #FC6E51;
 text-align: center;
 height:100%;
 }

#right {
 height:100%;
 background-color: #4FC1E9;
 text-align: center;
 }

See the live demo here of Bootstrap independent column scrolling vertically with responsive mechanism.

Leave a Reply

Your email address will not be published. Required fields are marked *