Bootstrap 5 — List Groups and Scrollspys

Photo by Brooke Cagle on Unsplash

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add scrollspys with list groups and more with Bootstrap 5.

List Group and Scrollspys

We can use list groups as navigation component for scrollspys.

For example, we can write:

<div class='row'>
  <div class='col-3'>
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class='col-9' style='max-height: 300px; overflow-y: scroll'>
    <h4 id="list-item-1">Item 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus…