Open In App

Bootstrap 5 Scrollspy with list-group

Last Updated : 05 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5, Bootstrap Scrollspy is a feature that automatically updates navigation links based on scroll position. It's particularly useful for long content-heavy pages where we want to keep the user informed about their current section in the document.

Bootstrap 5 Scrollspy with list-group classes: There is no specific class used to scrollspy with list-group. To create a list, we use the .list-group, and to create a list of items, we use the list-group-item.

Syntax:

<div id="list-example" class="list-group ">
    <a class="list-group-item 
        list-group-item-action" href="#list-item-1">
        ....
    </a>
    <a class="list-group-item list-group-item-action" 
        href="#list-item-2">
        ....
    </a>
</div>
<div class="col-*">
    <div data-bs-spy="scroll" data-bs-target="#list-example" 
         data-bs-smooth-scroll="true" class="scrollspy-example"
         tabindex="0">
        <h4 id="list-item-1">....</h4>
        <p>.....</p>
    </div>
</div>

Example 1: In this example, we set the items that automatically highlight the links based on the scroll using the .list-groups classes.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 - GeeksforGeeks</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>

    <style>
        .scrollspy-example {
            max-height: 300px;
            margin-bottom: 10px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>
                Bootstrap 5 Scrollspy with list-group
            </strong>
        </div>

        <div class="row">
            <div class="col-4">
                <div id="list-example" class="list-group ">
                    <a class="list-group-item 
                        list-group-item-action" href="#list-item-1">
                        Example 1
                    </a>
                    <a class="list-group-item 
                        list-group-item-action" href="#list-item-2">
                        Example 2
                    </a>
                    <a class="list-group-item 
                        list-group-item-action" href="#list-item-3">
                        Example 3
                    </a>
                    <a class="list-group-item list-group-item-action" 
                        href="#list-item-4">
                        Example 4
                    </a>
                </div>
            </div>
            <div class="col-8 text-bg-success">
                <div data-bs-spy="scroll" 
                    data-bs-target="#list-example" 
                    data-bs-smooth-scroll="true"
                    class="scrollspy-example" tabindex="0">
                    <h4 id="list-item-1">Section A</h4>
                    <p>A Computer Science Portal.Geeksforgeeks is a
                        platform for learning tech related topics,
                        engineering syllabus, they have online as
                        well as offline courses for on-demand 
                        topics like C++.
                    </p>
                    <h4 id="list-item-2">section B</h4>
                    <p>A Computer Science Portal.Geeksforgeeks is a
                        platform for learning tech related topics,
                        engineering syllabus, they have online as 
                        well as offline courses for on-demand topics like
                        C++.
                    </p>
                    <h4 id="list-item-3">section C</h4>
                    <p>A Computer Science Portal.Geeksforgeeks is 
                        a platform for learning tech related topics,
                        engineering syllabus, they have online as well                         
                        as offline courses for on-demand topics like
                        C++.
                    </p>
                    <h4 id="list-item-4">section D</h4>
                    <p>A Computer Science Portal.Geeksforgeeks is a 
                        platform for learning tech related topics,
                        engineering syllabus, they have online as well
                        as offline courses for on-demand topics like
                        C++.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

a1

Example 2: In this example, we set the items horizontally that automatically highlight the links based on the scroll position.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
            content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 - GeeksforGeeks</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>

    <style>
        .scrollspy-example {
            max-height: 200px;
            margin-bottom: 10px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Scrollspy with list-group
            </strong>
        </div>

        <div class="row text-bg-secondary">
            <div id="list-example" 
                class="list-group list-group-horizontal">
                <a class="list-group-item list-group-item-action" 
                    href="#list-item-1">Heading 1</a>
                <a class="list-group-item list-group-item-action" 
                    href="#list-item-2">Heading 2</a>
                <a class="list-group-item list-group-item-action" 
                    href="#list-item-3">Heading 3</a>
                <a class="list-group-item list-group-item-action" 
                    href="#list-item-4">Heading 4</a>
            </div>
            <div data-bs-spy="scroll" data-bs-target="#list-example" 
                data-bs-smooth-scroll="true"
                class="scrollspy-example" tabindex="0">
                <div id="list-item-1">
                    <p>This is list item 1
                       A Computer Science Portal.Geeksforgeeks is a 
                        platform for learning tech related topics,
                        engineering syllabus, they have online as well
                        as offline courses for on-demand topics like
                        C++.
                    </p>
                </div>

                <div id="list-item-2">
                    <p>This is list item 2
                        A Computer Science Portal.Geeksforgeeks is a                        
                        platform for learning tech related topics,
                        engineering syllabus, they have online as well 
                        as offline courses for on-demand topics like
                        C++.
                    </p>
                </div>
                <div id="list-item-3">
                    <p>This is list item 3
                        A Computer Science Portal.Geeksforgeeks 
                        is a platform for learning tech related topics,
                        engineering syllabus, they have online as well 
                        as offline courses for on-demand topics like
                        C++.
                    </p>
                </div>

                <div id="list-item-4">
                    <p>This is list item 4
                        A Computer Science Portal.Geeksforgeeks is a
                        platform for learning tech related topics,
                        engineering syllabus, they have online as well 
                        as offline courses for on-demand topics like
                        C++.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

a2

Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#example-with-list-group


Next Article
Bootstrap 5 Spinners Border Colors

B
bulbultomar
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox