How to make vertical scrollable rows in bootstrap?

Last Updated : 23 Sep, 2024

In Bootstrap, creating vertically scrollable rows allows for efficient display of large content within a limited space. By enabling vertical scrolling, users can view content that exceeds the visible area without altering the overall page layout, improving usability.

It can be done by the following approach:

Approach:

Set Fixed Container Height: Define a fixed height to limit visible content, allowing vertical scrolling for overflow.
Enable Vertical Scrolling: Use overflow-y: scroll; to add a scroll bar for content exceeding container height.
Position Divs Using position: absolute; Arrange div elements vertically by applying the position: absolute; property.
Utilize Bootstrap Grid System : Leverage Bootstrap’s grid system for a responsive and organized column layout.
Adjust for Responsiveness : Use media queries to ensure proper scroll behavior on various screen sizes.

Example: In this example we creates a vertically scrollable section using overflow-y: scroll in a Bootstrap row. The div elements are styled with alternating background colors and positioned to enable vertical scrolling.

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:

How to style Vertical Zebra-Striped Table in Bootstrap 5 ?

SHUBHAMSINGH10

Improve

Article Tags :

How to make vertical scrollable rows in bootstrap?

Similar Reads

Thank You!

What kind of Experience do you want to share?