1

The sample code for navbar which I copied from the the documentation page of bootstrap v5.0 is not working when I'm testing it in my own html page.

Yes, I did copied the CSS link:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

Plus all the other three JS links too.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

Here's the code sample which I used:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

And here's the documentation page link

Can anyone help me how to fix it?

Bhaskar Deori
  • 15
  • 1
  • 8

3 Answers3

4

I was checking the issue and found that you have multiple links for javascript.

Please delete the Popper.js and bootstrap.min.js scripts. When you are using the Bundle you don't need to include them.

Bundle Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our contents section.

So that means you just need to leave the CSS and this line

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Here is the sample. Please note that in resources I just used the CSS and the Bundle. After doing those corrections it should start working normally.

https://jsfiddle.net/ped823cw/

isherwood
  • 58,414
  • 16
  • 114
  • 157
carlosmena
  • 56
  • 2
  • 1
    Thanks for this answer. I was having the same issue in React. For anyone having similar problem using React, add `import 'bootstrap/dist/js/bootstrap.bundle'` to your **index.js** file – John Mar 11 '22 at 22:43
0

If you are integrating bootstrap in your reactJS and having this problem. Just as John commented, what you need to do is just to add the following in your index.js or App.js file

import 'bootstrap/dist/js/bootstrap.bundle'
Cary Bondoc
  • 2,923
  • 4
  • 37
  • 60
0

Changing the bootstrap attributes from data-toggle and data-target to data-bs-toggle and data-bs-target worked for me.

There is more details available here: What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?

muirisOG
  • 51
  • 5