Skip to content
Related Articles

Related Articles

How to make vertical scrollable rows in bootstrap?
  • Last Updated : 31 Jul, 2020
GeeksforGeeks - Summer Carnival Banner

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
    <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 arrow_drop_up
Recommended Articles
Page :