1

I'm trying to make a dropdown menu with Bootstrap, but it's not working (there's no dropdown when clicking on the button). However, I can perfecly use the framework to do styling stuff. The Bootstrap js link is at the bottom of the body tag too. I've tried many things, like changing the CDN link for another one, or trying other type of drop down, but nothing's working still. I've also tried other StackOverflow thread related to my problem, but again, nothing works.

Here's the HTML (I've simplified it for you)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body style="position: relative;">
    <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>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>

</html>

Thank you!

JT88
  • 47
  • 6

1 Answers1

3

You need to apply 2 changes:

data-toggle has been renamed to data-bs-toggle.

Second, add the dependency to popper.js:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

Or use the bootstrap version that has popper compiled in according to https://getbootstrap.com/docs/5.0/getting-started/download/

Daniel W.
  • 31,164
  • 13
  • 93
  • 151
  • Thanks! I wonder why they don't mention it at the top of Bootstrap documentation tho? To add the popper dependency and to change the data-toggle.. – JT88 Feb 01 '22 at 18:06