Scrollspy

Auto-highlight nav links based on scroll position

Scrollspy updates navigation links based on scroll position. It highlights the link for the section currently visible in the viewport.

Scroll the content area on the right. Watch the nav links highlight as different sections come into view.

data-bs-spy="scroll"

Introduction

Welcome to the guide. This section covers the basics of getting started with Bootstrap components and utilities.

Setup

Install Bootstrap via npm or include the CDN link in your HTML head. Both CSS and JS bundles are needed for interactive components.

Usage

Add Bootstrap classes to your HTML elements. No custom CSS needed for most common patterns and layouts.

Advanced

Customize Bootstrap with Sass variables, create your own theme, and extend utilities with the API.

Scroll to see the nav update

Add data-bs-spy="scroll" and data-bs-target to a scrollable element. The target nav highlights the link matching the visible section.