Dropdown button inside a card does not work (Bootstrap/Angular)

Question

Hey, guys! All right?

I cannot make the dropdown work and open your options. This button is inside a card that is to be a kind of left sidebar. I got this button on bootstrap. All this code is inside a card and a Nav. The jquery, Popper dependencies are downloaded.

    <div class="dropdown">
        <button class="btn  dropdown-toggle  texto font-weight-bold icone mr-1" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="https://www.flaticon.com/svg/static/icons/svg/3190/3190426.svg" alt="" width="30" height="26"
            class="d-inline-block align-top">
         Ano Escolar
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">1º ano EM</a></li>
          <li><a class="dropdown-item" href="#">2º ano EM</a></li>
          <li><a class="dropdown-item" href="#">3º ano EM</a></li>
        </ul>
      </div>

      <div class="dropdown">
        <button class="btn  dropdown-toggle  texto font-weight-bold icone" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="https://www.flaticon.com/premium-icon/icons/svg/2702/2702162.svg" alt="" width="30" height="26"
            class="d-inline-block align-top mr-1">
        Matéria
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Português</a></li>
          <li><a class="dropdown-item" href="#">História</a></li>
          <li><a class="dropdown-item" href="#">Matemática</a></li>
        </ul>
      </div>

      </ul>

Answer 1

You are using "data-Bs-toggle", which is a Bootstrap 5 attribute.

Either you remove the "data-Bs-toggle" and replace it with just "data-toggle", or you migrate the site to Bootstrap 5.