How to make vertical scrollable rows in bootstrap?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.