why doesn't bootstrap dropdown-menu work?

Question

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 class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div id="dropdown" class="dropdown-menu" x-placement="bottom-start">
        <a href="#" class="dropdown-item">Home</a>
        <a href="#" class="dropdown-item">shop</a>
        <a href="#" class="dropdown-item">cart</a>
        <a href="#" class="dropdown-item">checkout</a>

Cheers

score 1 · Answer 1 · answered May 04 '22 at 07:03

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


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

The only thing I had to change in order for the code to run as expected was to use data-bs-toggle instead of data-toggle. I found this here: https://stackoverflow.com/questions/69536277/what-is-the-difference-between-bootstrap-data-toggle-vs-data-bs-toggle-attribute Basically, bootstrap has updated their syntax since the guide I'm following was made which made the data-toggle into the incorrect syntax to use here. — Jacob Hermansson, May 04 '22 at 14:07

Diego D · Accepted Answer · 2022-05-04T07:22:39.917

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/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/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/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

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

Hey, I was using bootstrap 5 I noticed just now. The problem was that I had to use data-bs-toggle instead of data-toggle syntax. The reason behind why is not entirely clear, but I found this here on stack overflow: https://stackoverflow.com/questions/69536277/what-is-the-difference-between-bootstrap-data-toggle-vs-data-bs-toggle-attribute Basically data-toggle was not the correct syntax for this situation. Thank you for your response! — Jacob Hermansson, May 04 '22 at 14:05

why doesn't bootstrap dropdown-menu work?

2 Answers2