why doesn't bootstrap dropdown-menu work?-CodePudding

I'm convinced it's a minor mistake, but I can't seem to spot it. I'm following this edureka guide here: https://youtu.be/jeZ-URjZM_M?t=978

This is the code:

<div >
    <button  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div id="dropdown"  x-placement="bottom-start">
        <a href="#" >Home</a>
        <a href="#" >shop</a>
        <a href="#" >cart</a>
        <a href="#" >checkout</a>

Cheers

CodePudding user response：

<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>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


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

CodePudding user response：

Supposing you are using Bootstrap 4 as stated among your question tags...

Did you include every required resource like stated here?

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Anyway as you can see, the demo copied from the Boostrap4 web site just works as intended:

<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/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<div >
  <button
    
    type="button" id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Dropdown button
  </button>
  <div  aria-labelledby="dropdownMenuButton">
    <a  href="#">Action</a>
    <a  href="#">Another action</a>
    <a  href="#">Something else here</a>
  </div>
</div>