How to make vertical scrollable rows in bootstrap?

Last Updated : 31 Jul, 2020

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:

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles