How to make vertical scrollable rows in bootstrap? Last Updated : 05 May, 2022 Improve Improve Like Article Like Save Share Report Here is the task to make vertically scrollable in a bootstrap row. It can be done by the following approach: Approach: Making all the div element in next line using position: absolute; property (arrange all div column-wise). Adding the scroll bar to all the div element using overflow-y: scroll; property. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to make vertical scrollable in a bootstrap row? </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> .vertical-scrollable>.row { position: absolute; top: 120px; bottom: 100px; left: 180px; width: 50%; overflow-y: scroll; } .col-sm-8 { color: white; font-size: 24px; padding-bottom: 20px; padding-top: 18px; } .col-sm-8:nth-child(2n+1) { background: green; } .col-sm-8:nth-child(2n+2) { background: black; } </style> </head> <body> <center> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <h3> To make vertical scrollable in a bootstrap row? </h3> <div class="container vertical-scrollable"> <div class="row text-center"> <div class="col-sm-8"> 1 </div> <div class="col-sm-8"> 2 </div> <div class="col-sm-8"> 3 </div> <div class="col-sm-8"> 4 </div> <div class="col-sm-8"> 5 </div> <div class="col-sm-8"> 6 </div> <div class="col-sm-8"> 7 </div> </div> </div> </div> </center> </body> </html> Output: Like Article Suggest improvement Previous Bootstrap 5 alpha | Icons Library Next How AngularJS prefixes $ and $$ are used? Share your thoughts in the comments Add Your Comment Please Login to comment...