title: Why does the Bootstrap scrollspy feature not work in my code?
body: <p>I have recently started learning BootStrap. But I am stuck with scrollspy. No matter how many ways I place data dash attributes as given in the internet, it still does not seem work, so the problem must be somewhere in my code, which is given below:</p>
  <pre><code>&lt;body style=&quot;position: relative;&quot; data-bs-spy=&quot;scroll&quot; data-bs-offset=&quot;10&quot;&gt;
      
      &lt;nav class=&quot;navbar navbar-default fixed-top bg-dark&quot; id=&quot;navbar-eg&quot;&gt;
          &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;navbar-eg&quot; role=&quot;tablist&quot;&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link active&quot; href=&quot;#head1&quot;&gt;head1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#head2&quot;&gt;head2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#head3&quot;&gt;head3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#head4&quot;&gt;head4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      
          &lt;div id=&quot;head1&quot; style=&quot;margin-top:60px;padding-top:1%;border-bottom:1px solid #000000;&quot;&gt;
              &lt;h2 &gt;head1&lt;/h1&gt;
              &lt;p&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
                  anim id est laborum.
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id=&quot;head2&quot; style=&quot;padding-top:1%;border-bottom:1px solid #000000;&quot;&gt;
              &lt;h2 &gt;head2&lt;/h2&gt;
              &lt;p&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
                  anim id est laborum.
              &lt;/p&gt;
          
          &lt;div id=&quot;head3&quot; style=&quot;padding-top:1%;border-bottom:1px solid #000000;&quot;&gt;
              &lt;h2&gt;head3&lt;/h2&gt;
              &lt;p&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
                  anim id est laborum.
              &lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div id=&quot;head4&quot; style=&quot;padding-top:1%;&quot;&gt;
              &lt;h2&gt;head4&lt;/h2&gt;
              &lt;p&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
                  anim id est laborum.
              &lt;/p&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>These are the things that I have embedded into my code.</p>
  <pre><code>    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
      integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;/&gt;
      
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt; 
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot; 
      integrity=&quot;sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Can anyone help me out spottinging the mistake?</p>