Bootstrap 5 Dropdown Not Functioning-CodePudding

I am using Bootstrap 5 along Django to develop a website and I'm having issues getting a dropdown to function correctly. I have copied this code from w3schools exactly how it is and it is not working when I load the HTML. I've tried running it on the latest version of Chrome and Firefox and still no success. Does it have to do with the Bootstrap CDN?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <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">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div >
    <button type="button"  data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul >
      <li><a  href="#">Link 1</a></li>
      <li><a  href="#">Link 2</a></li>
      <li><a  href="#">Link 3</a></li>
    </ul>
  </div>
</div>

</body>
</html>

CodePudding user response：

just do it

<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >

        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Features</a>
        </li>
        <li >
          <a  href="#">Pricing</a>
        </li>
        <li >
          <a >Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CodePudding user response：

I don't what your exact problem is but this worked for me when I had the same issue.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2 xf0Uwh9KtT" crossorigin="anonymous"></script>

<div >
      <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul  aria-labelledby="dropdownMenuButton1">
        <li><a  href="#">Action</a></li>
        <li><a  href="#">Another action</a></li>
        <li><a  href="#">Something else here</a></li>
      </ul>
    </div>