How to fixed one column and scrollable other column or columns in Bootstrap ?

30 Nov, 2019
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.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. This article will demonstrate how to keep one column fixed, and the other column scrollable.
Syntax:
To fixed the column make not scrollable.<div class="col-sm-6 col-2 fixed-top one">
<div class="col-sm-6 col-2 fixed-top one">
To make the column scrollable.<div class="col-sm-6 offset-sm-6 two">
<div class="col-sm-6 offset-sm-6 two">
Below example illustrates the above approach:
Example: You can run the code by hitting the run button so you can see the right column is scrollable but left is not.
<!DOCTYPE html><html>    <head>        <meta name="viewport"              content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">        </script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">        </script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">        </script>          <style>            .one{                background-color:lightgreen;            }            .two{                background-color:green;            }            .container-fluid{                font-size:120%;            }        </style>    </head>    <body>        <div class="container-fluid">            <div class="row">                <div class="col-sm-6 col-2 fixed-top one">                    <h2>Fixed</h2><br>                    It is a good platform to learn programming. It is an                     educational website. Prepare for the Recruitment drive                     of product based companies like Microsoft, Amazon,                     Adobe etc with a free online placement preparation                     course. The course focuses on various MCQ's & Coding                     question likely to be asked in the interviews & make                     your upcoming placement season efficient and successful.                    Also, any geeks can help other geeks by writing articles                     on the GeeksforGeeks, publishing articles follow few                     steps that are Articles that need little modification/                     improvement from reviewers are published first. To                     quickly get your articles reviewed, please refer                     existing articles, their formatting style, coding                     style, and try to make you are close to them.                    Adobe etc with a free online placement preparation                     course. The course focuses on various MCQ's & Coding                     question likely to be asked in the interviews & make                     your upcoming placement season efficient and successful.                    Also, any geeks can help other geeks by writing articles                     on the GeeksforGeeks, publishing articles follow few                     steps that are Articles that need little modification/                     improvement from reviewers are published first. To               </div>              <div class="col-sm-6 offset-sm-6 two">                    <h2>Scrollable</h2><br>                    It is a good platform to learn programming. It is an                     educational website. Prepare for the Recruitment drive                     of product based companies like Microsoft, Amazon,                     Adobe etc with a free online placement preparation                     course. The course focuses on various MCQ's & Coding                     question likely to be asked in the interviews & make                     your upcoming placement season efficient and successful.                    Also, any geeks can help other geeks by writing articles                     on the GeeksforGeeks, publishing articles follow few                     steps that are Articles that need little modification/                     improvement from reviewers are published first. To                     quickly get your articles reviewed, please refer                     existing articles, their formatting style, coding                     style, and try to make you are close to them.                    Adobe etc with a free online placement preparation                     course. The course focuses on various MCQ's & Coding                     question likely to be asked in the interviews & make                     your upcoming placement season efficient and successful.                    Also, any geeks can help other geeks by writing articles                     on the GeeksforGeeks, publishing articles follow few                     steps that are Articles that need little modification/                     improvement from reviewers are published first. To             </div>        </div>    </body></html>                    
Output:
Bootstrap-4
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set Bootstrap Timepicker using datetimepicker library ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?