Drop Down Menu isn't Working with html and css

Question

I tried to create a drop-down menu with these codes. But unfortunately, this isn't working for me. I need help asap. Thanks in advance dear sir/ma'am who will help me.

<div id="control-panel" class="col-xs-10 col-xs-offset-1 row">
    <div id="time-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Any Time
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any Time</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Week</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Month</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Year</a></li>
      </ul>
    </div>

    <div id="num-results-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        10 Results
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">10 Results</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">20 Results</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">30 Results</a></li>
      </ul>
    </div>

    <div id="tld-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Any TLD
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any TLD</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.edu</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.gov</a></li>
      </ul>
    </div>
</div>

Answer 1

According to the documentation, the bootstrap v5 uses:

data-bs-toggle="dropdown"

for drop-down toggling.

Note : I checked your code with bootstrap v3.3, it works fine, but was not working with Bootstrap v5.

The suggested modifications are needed if you want to use bootstrap v5.

Here is the code with Bootstrap v5:

   <div id="control-panel" class="col-xs-10 col-xs-offset-1 row">
<div id="time-dropdown" class="dropdown col-xs-3">
  <a class="btn dropdown-toggle" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="true">
    Any Time
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any Time</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Week</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Month</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Year</a></li>
  </ul>
</div>

<div id="num-results-dropdown" class="dropdown col-xs-3">
  <a class="dropdown-toggle" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="true">
    10 Results
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">10 Results</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">20 Results</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">30 Results</a></li>
  </ul>
</div>

<div id="tld-dropdown" class="dropdown col-xs-3">
  <a class="dropdown-toggle" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="true">
    Any TLD
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any TLD</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.edu</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.gov</a></li>
  </ul>
</div>