Bootstrap 4.5 Navbar is not expanding for Collapsible items

Question

My application is build on Bootstrap 4.5 & using the bootstrap suggested method for Navbar collapse items, the icon is visible but items are missing. I have -navbar.scss which all the properties defined.

My HTML code.

    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="light.html">Lights</a>
          </li>
        <li class="nav-item">
          <a class="nav-link" href="light.html">Lights</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Shades.html">Shades</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Climtes.html">Climates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="Settings.html">Settings</a>
        </li>
      </ul>
  </nav>

Screenshots:- enter image description here enter image description here

Answer 1

The code above works as expected if you add Bootstrap 4 to your project correctly.

See the snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="light.html">Lights</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="light.html">Lights</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Shades.html">Shades</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Climtes.html">Climates</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Settings.html">Settings</a>
      </li>
    </ul>
  </div>
</nav>