title: bootstrap 5 navbar toggle button not working
body: <p>I have html code, when I resize the browser screen I have a problem that the toggle button is not displayed (it is transparent) when I click on it the navigation bar items are not showing at all<a href="https://i.stack.imgur.com/aF0BU.png" rel="nofollow noreferrer">Screenshot of my web</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              profile 
          &lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;!-- Bootstrap CSS--&gt;
          &lt;link rel="stylesheet" href="../css/bootstrap/bootstrap.css"&gt;
          &lt;!-- w3 CSS--&gt;
          &lt;link rel="stylesheet" href="../css/W3.css"&gt;
           &lt;!-- profile CSS--&gt;
           &lt;link rel="stylesheet" href="../css/accueil.css"&gt;
          &lt;!-- flaticon CSS--&gt;
          &lt;link rel="stylesheet" href="../icons/font/flaticon.css"&gt;
          &lt;!--Scripts--&gt;
          &lt;!-- JQuery script--&gt;
          &lt;script src="../js/jQuery.js"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap script--&gt;
          &lt;script src="../js/bootstrap/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;nav class="navbar navbar-expand-md fixed-top"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;a class="navbar-brand" href="accueil.html"&gt;
                          &lt;h4&gt;LOGO&lt;/h4&gt;
                      &lt;/a&gt;
                      &lt;!--Collapse button --&gt;
                      &lt;button type="button" class="navbar-toggler" 
                      data-bs-toggle="collapse" data-bs-target="#coll_target"
                      aria-controls="coll_target" aria-expanded="false"
                      aria-label="Toggle Navbar" &gt;
                          &lt;span class="navbar-toggler-icon" &gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;!--Collapse Div --&gt;
                      &lt;div class="collapse navbar-collapse" id="coll_target"&gt;
                          &lt;div class="mx-auto"&gt;&lt;/div&gt;
                          &lt;ul class="navbar-nav ml-auto"&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link"&gt;&lt;span&gt;&lt;i class="flaticon-ringing" style="color: white;"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link"&gt;&lt;span&gt;&lt;i class="flaticon-email" style="color: white;"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link"&gt;&lt;span&gt;&lt;i style="color: white;" class="flaticon-down-arrow"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link"&gt;&lt;span&gt;&lt;i style="color: white;" class="flaticon-translation"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link"&gt;&lt;span&gt;&lt;i class="flaticon-settings" style="color: white;"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
             
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>