1

I know there are a lot of other similar questions and I have tried most of them, but nothing seems to work. It just does not expand to show the dropdown items. I have included this in the head

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

And I have this

      <!-- DROPDOWN -->
    <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1"
            data-bs-toggle="dropdown" aria-expanded="false"> 
            <img src="user.jpg" alt="" width="32" height="32" class="rounded-circle me-2"> 
                <strong> John W </strong> </a>
        <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="#">New project</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>                
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
user14583977
  • 73
  • 1
  • 6

1 Answers1

1

If you're using Bootstrap 4 you need to use data-toggle="dropdown" rather than data-bs-toggle="dropdown".

<div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1"
            data-toggle="dropdown" aria-expanded="false"> 
            <img src="user.jpg" alt="" width="32" height="32" class="rounded-circle me-2"> 
                <strong> John W </strong> </a>
        <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="#">New project</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>                
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

data-bs- was added to Bootstrap 5 only I believe.

Tom James
  • 184
  • 1
  • 3
  • Thanks, but I am using Bootstrap 5. – user14583977 Oct 31 '21 at 19:07
  • Oh ok sorry it was tagged with bootstrap-4 so I assumed it was 4. Have you tried upgrading to 5.1.3 if you're on 5.0.1 now. Any console errors? Structure looks ok to me & works on codepen here: https://codepen.io/themelizeme/pen/KKvXQze – Tom James Oct 31 '21 at 19:43
  • My mistake, wrong tag. I just managed to get it to work, thank you so much for trying to help me. I added aria-expanded="false", this script at the bottom and this to
      – user14583977 Oct 31 '21 at 20:42
    • Glad you got it working! – Tom James Nov 01 '21 at 05:03