Bootstrap 4 Navbar Collapsed for Mobile on Page Load (Laravel/laravel-mix)

Question

Well I'm not really sure to turn at this point because this makes absolutely no sense to me.

I'm using the latest version of Laravel and Laravel Mix, which may or may not be related.

I've updated Laravel to use the latest Bootstrap 4 Alpha with the following dependencies:

"axios": "^0.16.2",
"bootstrap": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"tether": "^1.4.0",
"popper.js": "^1.11.0"

Everything here is the correct versions.

I've updated my bootstrap.js to include the correct bootstrap module and the newly required modules:

try {
    window.$ = window.jQuery = require('jquery');

    window.Tether = require('tether');
    window.Popper  = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

I'v also corrected the SCSS path in app.scss:

@import "node_modules/bootstrap/scss/bootstrap"; 

Now the problem is that when I load the the app after running npm run dev the navbar is collapsed... as if it was on mobile, but I'm testing on a desktop.

Now it gets even weirder because if I include bootstrap.min.css from the Bootstrap CDN, then it works fine.

I don't want to do that though, but clearly I may end up having to because I have no idea what the problem is.

I've tried various things such as commenting out all my custom CSS, Javascript, reinstalling node_modules multiple times, etc. I'm lost at this point.

edit: I've also tried using the default Bootstrap navbar when using my app.css file and it still doesn't work. Again, works fine though if I use the CDN instead.

Answer 1

@Jake, my guess is you're getting bootstrap4.0.0-beta and trying to use markup and classes related to bootstrap4.0.0-alpha.6.

If you uninstall bootstrap and run npm install [email protected] --save-exact, your code should work.

OR

You can use this code for your navbar in you current project to see if it works correctly.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>