Bootstrap scrollspy not working Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 48 of bootstrap tutorial in
this video well discuss what to do if
the bootstraps rules by plugin is not
working many of you have sent me email
saying you have used exactly the same
code that we discussed in our previous
video but could not get the scroll spy
plugin to work chances are you might be
missing the doctype declaration doctype
declaration is required for the scrolls
by plugin to work notice at the top of
our HTML file we've got the doctype
declaration at this point the scroll spy
plugin works is expected notice as we
scroll up and down the respective links
with Manabe are highlighted but the
moment we remove this doctype
declaration and when we reload this page
first of all notice the last link within
the navbar is highlighted and as we
scroll up and down nothing happens so
the scrolls by plugin is not working but
the moment we put it back in place and
when we reload it starts to work again
so the first step is to make sure you
have that doctype declaration this
doctype declaration designates this file
as html5 and the scrolls pi plug-in
should start to work even after this
step if this goes by plugin is still not
working then make sure the element with
data spy attribute has the position
style set relative in our example it's
the body element that has got the data
spy attribute and if you notice within
the style section we have set body
elements position two relative even
after the second step if the scrolls by
plugin is still not working then use
scrolls by method to manually add the
scrolls by plug-in using javascript
instead of using data - attributes let's
now flip to visual studio and scroll all
the way down to a jquery ready function
it's the body element that we want to
spy on so first let's find the body
element and on that let's call scrolls
pi method we need to specify two options
for this method and those two options
are target and offset the value for
target option is the ID of our navbar
and the value for offset is the default
value 10
so let's go ahead and specify those two
options first let's specify the target
option so the value for the target
option is the ID of our navbar which is
main navbar and the value for the offset
option is going to be the default value
10 since we have added this closeby
plugin manually using JavaScript code
there is no need for these data dash
attributes so let's go ahead and delete
all these three data attributes let's
say what changes reload our webpage now
notice the scroll spy plug-in is working
exactly the same way as before
here is the JavaScript code that we just
discussed thank you for listening and
have a great day