Bootstrap 4 navbar layout works using CDN, breaks using loaded code

Question

The Navbars download crashed and was not formatted correctly using the downloaded Bootstrap 4 Alpha code, but it looks fine using the Bootstrap 4 Alpha CDN. Using the downloaded code is necessary for this project.

Appearance of Navbar with the downloaded Bootstrap 4 Alpha code: View image

Appearance of Navbar using Bootstrap 4 Alpha CDN (the view I want): View image

This is my HTML, it does not change:

<nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">About Us <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Meet the Team</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Log In</a> </li> </ul> </div> </div> </nav> 

I don’t know what is wrong or how to fix it. Is anyone familiar with this problem? Thanks

Answer 1

From Bootstrap 4 alpha 6 to beta , navbar-toggleable-* changed to navbar-expand-* , so if you use navbar-expand-* with alpha this will not work.

If you want it to work in alpha 6 , this would be:

<nav class="navbar navbar-toggleable-md navbar-light">..</nav>

If you want it to work in beta strong>, this would be:

<nav class="navbar navbar-expand-lg navbar-light">..</nav>