Why my Bootstrap dropdown not showing anything

December 14, 2023

I am a newbe and trying to make a botton the do dropdown when click on it, this is what i did but the dropdown is not working can anybody tell me why or corecct my code, thx alot.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
  </head>
  <body>
    <div class="row m-2">
      <div class="col"><h2>logo</h2></div>
      <div class="col">
        <div class="dropdown">
          <div
            class="btn btn-success dropdown-toggle"
            id="x"
            data-toggle="dropdown"
          >
            Courses
          </div>
          <div class="dropdown-menu" aria-labelledby="x">
            <a href="#" class="dropdown-item">A1</a>
            <a href="#" class="dropdown-item">A2</a>
            <a href="#" class="dropdown-item">B1</a>
            <a href="#" class="dropdown-item">B2</a>
          </div>
        </div>
      </div>
      <div class="col"><div class="btn btn-outline-dark">About me</div></div>
      <div class="col"><div class="btn btn-outline-dark">Contact</div></div>
    </div>

    <script src="js/popper.min.js"></script>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

trying to make something like a nav bar with botton that do dropdown when click on it

>Solution :

Your code should work fine, please get the correct version of popper

A working example with popperjs version 1.16.1 is shown below without any change in html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<div class="row m-2">
  <div class="col">
    <h2>logo</h2>
  </div>
  <div class="col">
    <div class="dropdown">
      <div class="btn btn-success dropdown-toggle" id="x" data-toggle="dropdown">
        Courses
      </div>
      <div class="dropdown-menu" aria-labelledby="x">
        <a href="#" class="dropdown-item">A1</a>
        <a href="#" class="dropdown-item">A2</a>
        <a href="#" class="dropdown-item">B1</a>
        <a href="#" class="dropdown-item">B2</a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="btn btn-outline-dark">About me</div>
  </div>
  <div class="col">
    <div class="btn btn-outline-dark">Contact</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>