<!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>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</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>