How to fix dropdown not working bootstrap

BootstrapDebug / FixBeginner · 3 min read

How to Fix Dropdown Not Working in Bootstrap Quickly

Bootstrap dropdowns often don't work because the required Bootstrap JavaScript or Popper.js is missing or not loaded properly. Ensure you include both the Bootstrap CSS and JavaScript files, plus Popper.js, in the correct order for the dropdown to function.

🔍

Why This Happens

The dropdown in Bootstrap relies on JavaScript to toggle the menu when clicked. If the Bootstrap JavaScript or its dependency Popper.js is missing, the dropdown won't open. Also, incorrect HTML structure or missing data-bs-toggle="dropdown" attribute can cause it to fail.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Broken Dropdown</title>
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
  <!-- Missing Bootstrap JS and Popper.js -->
</body>
</html>

Output

Clicking the button does nothing; the dropdown menu does not appear.

🔧

The Fix

Include the Bootstrap JavaScript bundle which contains Popper.js, and add the data-bs-toggle="dropdown" attribute to the button. This enables the dropdown toggle functionality.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Fixed Dropdown</title>
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

Clicking the button shows the dropdown menu with the listed actions.

🛡️

Prevention

Always include the Bootstrap JavaScript bundle after the CSS in your HTML. Use the official CDN links or local files correctly. Make sure to add data-bs-toggle="dropdown" on dropdown toggle buttons. Test your dropdowns early to catch missing scripts or markup errors.

⚠️

Related Errors

Other common Bootstrap dropdown issues include:

Missing aria-expanded attribute causing accessibility problems.
Conflicts with other JavaScript libraries blocking Bootstrap scripts.
Incorrect HTML nesting breaking dropdown structure.

Quick fixes involve checking script order, removing conflicting scripts, and validating HTML structure.

✅

Key Takeaways

Include Bootstrap's JavaScript bundle with Popper.js for dropdowns to work.

Add the attribute data-bs-toggle="dropdown" to the dropdown toggle button.

Load CSS first, then JavaScript in your HTML for proper Bootstrap behavior.

Validate your HTML structure matches Bootstrap's dropdown requirements.

Test dropdowns early to catch missing scripts or markup mistakes.