Bootstrap Scrollspy Link Active Not Applied

Bootstrap 4 scrollspy not working to change active navbar items

The ScrollSpy component is applying the active class to the nav-item, but you can't see it because you don't have navbar-light class in the navbar.

The Bootstrap 4 CSS selector that applies the style (darker text color) is this:

.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

So, just add the navbar-light class like this:

<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light bg-transparent fixed-top">
</nav>

Demo: https://www.codeply.com/go/ic6Md3e4y1

Scrollspy active not working with bootsrap 5

As explained in the Bootstrap 5 docs..

"Scrollable containers and keyboard access If you’re making a
scrollable container (other than the ), be sure to have a height
set and overflow-y: scroll;..."

For example,

.scrollspy-example {
    position: relative;
    height: 300px;
    overflow: auto;
}

Demo

Bootstrap scrollspy link active not applied

It seems to work if you assign the data-spy and data-target attributes to a body tag instead of the containing div.

http://plnkr.co/edit/O1244QqRJEOcRfXCCk5J

Bootstrap Scroll Spy not working.Shows only the home state active but doesnt change to other states when scrolled down

There are a couple of things wrong.

First, 3 of your nav-link anchors have data-target= when they should have href=

Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:

<body data-target="#navbar">

and third, if you haven't, you need to call Scrollspy via Javascript:

$('body').scrollspy({ target: '#navbar' })

Here is a Codepen with a working example:

http://codepen.io/charliebeckstrand/pen/NrWpXP

Bootstrap scrollspy active selector not working

It's because your fiddle doesn't include bootstrap.js. The JS is needed for the ScrollSpy component.

Working on Bootply:
http://bootply.com/wJHL1Vqpdi

Bootstrap 4.0.0-beta.2 Scrollspy active class not updating with page scrolling

You need to reference/install popper.js. Bootstrap depends on it.

Without it, the JS will error which is causing your scrollspy not to work.

Here's the updated working pen with reference to:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Working on Codeply (auto includes Bootstrap and any dependencies)