Hamburger button on bootstrap wont open

Issue

I have followed the code from BootStrap as follows:

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

<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="index.html">One Basket</a>
  <button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
         <span class="navbar-toggler-icon"></span>
       </button>
  <div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" 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.

Solution

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="index.html">One Basket</a>
  <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
     <span class="navbar-toggler-icon"></span>
   </button>
  <div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

Answered By - Yaroslav Trach