In Bootstrap 5, one of the features is Bootstrap Scrollspy which targets the navigation bar contents automatically on scrolling through the area.
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.
<!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 =
<!-- Bootstrap Javascript -->
< 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 >
|
Output:
Example 2: In this example, we set the items horizontally that automatically highlight the links based on the scroll position.
<!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 =
<!-- Bootstrap Javascript -->
< script src =
</ script >
< script src =
</ 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:
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#example-with-list-group