Problem using the Bootstrap 4 Beta Scrollspy feature on Codepen

Problem using the Bootstrap 4 Beta Scrollspy feature on Codepen
0

#1

Hi there everyone!

I’m trying to use the Bootstrap 4 Scrollspy feature for my Portfolio Page challenge, but I can’t make it work in Codepen.

I searched in Google and found that someone used this feature in Codeply, here’s the link, and it works just fine.

I took the code and put it on Codepen, but couldn’t make it work, here’s the link. As you can see, when you scrolldown, the nav items don’t change, but in Codeply they do.

Does anyone know what’s wrong?

Thanks in advance for your help.

Juan Betancourt.

PS: I think it’s possible that the problem is in the CSS and JavaScript Pen settings or in the body tag attributes.


#2

If you look at the source code of the HTML frame on codeply, you will see they are using the following three external JavaScript libraries. Change your external JS libraries to these (in the exact order) and it should work the same:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

#3

Thanks Randell, that made it. I was missing the popper.min.js script.

I put this link https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js in the Java Script Pen Settings and worked.