Bootstrap burger menu not worked-CodePudding

I copied the navbar from the bootstrap navbar documentation, but when I click, the hamburger menu does not work for me, it just does not display the nav items for me. my hamburger menu

My code in bs-navbar.component.html

<nav >
  <div >
    <img src="../../assets/images/logo.png" alt="" width="55" height="60"/>
    <a  href="#">medochek</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarText">
      <ul >
        <li >
          <a  href="#">Замовити</a>
        </li>
        <li >
          <a  href="#">Контакти</a>
        </li>
        <li >
          <a  href="#">Галерея</a>
        </li>
        <li >
          <a  href="#">Про мед</a>
        </li>
      </ul>
      <span >
         380 66-842-45-32
      </span>
    </div>
  </div>
</nav>

I use Angular so I'm imported bootstrap like this: @import "~bootstrap/dist/css/bootstrap.css" in styles.css

CodePudding user response：

You need the following imports in your framework's import style to be imported for the bootstrap navbar button to work and also for all the styles visible completely.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

The compatible versions of the above links you can check & replace for the bootstrap version you are using.

The second option is you can write your own javascript code to add/remove dynamic CSS active class from your navbar menu.