Bootstrap dropdown menu not working in mobile view

Issue

I want that if I change to mobile view, the menu items will collapse and when I click it, then it shows the menu in dropdown. It seems this code does not work, what's wrong?

I want to click this icon and show menu item in dropdown. Check this image Mobile View

This is how it looks like in desktop view Desktop View

in HTML:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
  <a class="navbar-brand" href="#">Admin Panel</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end mr-5" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <div class="btn-group m-1">
        <li class="nav-item">
          <a class="nav-link btn btn-success active m-1" aria-current="page" href="home.php">View Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-primary m-1" href="add_event.php">Add Event</a>
        </li>
        <li class="nav-item dropdown">
          <div class="btn-group m-1">
            <button type="button" class="btn btn-primary dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
              User
            </button>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="userFeedback.php">Feedback</a>
              <a class="dropdown-item" href="userProblem.php">Issues</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" onclick="logoutChecker()" href="index.php">Logout</a>
            </div>
          </div>
        </li>
      </div>
    </ul>
  </div>
</div>

then the script:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"> 
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Solution

Hey you have some extra text in your button

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">

Instead of using data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent" you have to use data-toggle="collapse" and data-target="#navbarsExample01" take out the bs as you are using bootstrap 4 for more information you can check de Docs in Bootstrap official site.

Also don't forget to close your nav tag at the end of your code

Answered By - Chris