Bootstrap Dropdown doesn't want to towrk-CodePudding

I literally pulled this code off of the bootstrap website and it still doesn't want to work. The dropdown menu for some reason is not working and I can't figure out why. I've tried just using the bundler js script but it still didn't work.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="css/styles.css">

  <title>To Do List</title>
</head>

<body>

  <nav >
    <a  href="#">Navbar</a>
    <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNavDropdown">
      <ul >
        <li >
          <a  href="#">Home <span >(current)</span></a>
        </li>
        <li >
          <a  href="#">Features</a>
        </li>
        <li >
          <a  href="#">Pricing</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
          <div  aria-labelledby="navbarDropdownMenuLink">
            <a  href="#">Action</a>
            <a  href="#">Another action</a>
            <a  href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

If anyone can figure out why I would appreciate it. Thanks

CodePudding user response：

Try connecting bootstrap 4 instead of bootstrap 5
Or, It might help, replace data-toggle with data-bs-toggle and data-target with data-bs-target.

CodePudding user response：

What do you mean by "is not working"?

Dropdown does not open ?
or it does nothing after clicking on link?

You should be able to see dropdown appear/disappear when you click on Dropdown link.

If you expect something to happen, then your links in .dropdown-menu are missing href value so they can redirect.

You got included css/styles.css. Is there any chance that there is style which may break bootstrap dropdown styles? Also checking browser's developer tools -> console for possible errors would be useful

CodePudding user response：

I figured it out. I used the code below and added data-bs-toggle="dropdown" to the dropdown.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR 1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>