Hamburger button on bootstrap wont open-CodePudding

I have followed the code from BootStrap as follows:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<!-- Nav Bar -->
<nav >
  <a  href="index.html">One Basket</a>
  <button  type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
         <span ></span>
       </button>
  <div  id="navbarToggleExternalContent2">
    <ul >
      <li >
        <a  href="">Contact</a>
      </li>
      <li >
        <a  href="">Pricing</a>
      </li>
      <li >
        <a  href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

I have also added the CSS from the bootstrap documentation and the javascript to the HTML file. The JS is at the end before the close body tag, just like it says on the bootstrap website.

The CSS is the first link tag in the head. But when I try to press the button nothing happens.

CodePudding user response：

You have wrong attributes to make it work by default, just replace data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" with data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2", see (in my CodeSnippet I using BS v5.1):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


<!-- Nav Bar -->
<nav >
  <a  href="index.html">One Basket</a>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
     <span ></span>
   </button>
  <div  id="navbarToggleExternalContent2">
    <ul >
      <li >
        <a  href="">Contact</a>
      </li>
      <li >
        <a  href="">Pricing</a>
      </li>
      <li >
        <a  href="">Download</a>
      </li>
    </ul>
  </div>
</nav>