How to Fixed One Column and Scrollable Other Column or Columns in Bootstrap?

Bootstrap provides several built-in features to the users. This makes development faster and smoother. However, in some cases, external CSS and jQuery has to be implemented to the web page's coding in order to give it a personalized touch. Usually, the Bootstrap grid is used to divide the web-page into 12 equal columns. These columns can be grouped together to create wider columns. The columns are responsive in nature. This means that the columns will cover the whole screen on big screens, but will stack on top of each other on small screen devices.

Approach

When the webpage is divided into two equal columns, and the content inside the columns starts to overflow, the columns become scrollable. However, by doing some small modifications, the columns can be fixed. In this approach we will demonstrate how to keep one column fixed, and the other column scrollable by using the below given syntax.

Syntax:

// To fixed the column make not scrollable. 
<div class="col-sm-6 col-2 fixed-top one">

//To make the column scrollable.
<div class="col-sm-6 offset-sm-6 two">

Example: Below example illustrates the above approach.

Output: