Bootstrap 5 — List Groups and Scrollspys

Image for post
Image for post
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:

We have the list group on the left side to show the entry that we’ve scrolled to.

The right side has the content.

We set the overflow-y to scroll and have the IDs match the href of the links on the list group.

The data-target is set to the ID of the list group.

JavaScript

We can add scrollspys with the bootstrap.ScrollSpy constructor.

For example, we can write:

We can then call the refresh method on it to refresh the scrollspy:

We get the scrollspy element and call refresh on them.

Events

The activate.bs.scrollspy event is emitted whenever a new item is activated on a scrollspy.

And we can listen to it by writing:

Image for post
Image for post
Photo by Isabela Kronemberger on Unsplash

Conclusion

We can use list groups with scrollspys.

Also, we can use JavaScript to manipulate them.

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store