не могу увидеть кнопку переключения в навигационной панели

Question

Я написал код кнопки переключения, чтобы увидеть, когда размер экрана браузера уменьшается на панели навигации с помощью bootstrap4, но кнопка не показывает, пожалуйста, что не так с моим кодом:

<nav class="navbar navbar-expand-lg">
   <button class="navbar-toggler " data-toggle="collapse" data- 
      target="#navbarcollapse">
   <span class="navbar-toggler-icon" ></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class ="navbar-nav mr-auto">
         <li class="nav-item  active"><a href="#"class="nav-link">Home</a></li>
         <li><a href="#" class="nav-link">Services</a></li>
         <li><a href="#"class="nav-link">Downloads</a></li>
         <li><a href="#"class="nav-link">Projects</a></li>
         <li><a href="#"class="nav-link">About Us</a></li>
         <li><a href="#"class="nav-link">Contact</a></li>
      </ul>
   </div>
</nav>

Answer 1

Только что добавил bg-light navbar-light и кнопка была видна.

<nav class="navbar navbar-expand-lg bg-light navbar-light">
   <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#navbarcollapse">
   <span class="navbar-toggler-icon" ></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class ="navbar-nav">
         <li class="nav-item"><a href="#"class="nav-link">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Downloads</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Projects</a></li>
         <li class="nav-item"><a href="#"class="nav-link">About Us</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Contact</a></li>
      </ul>
   </div>
</nav>