Bootstrap 5 Scrollspy with list-group
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.
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 - w3wiki</ title > <!-- Bootstrap CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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" >w3wiki</ 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.w3wiki 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.w3wiki 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.w3wiki 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.w3wiki 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.
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 - w3wiki</ title > <!-- Bootstrap CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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" > w3wiki </ 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.w3wiki 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.w3wiki 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.w3wiki 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.w3wiki 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
Contact Us