Navbar in Bootstrap 4 reversed and toggle inactive

Question

Getting to grips with Bootstrap 4, particularly the responsive menu. I have implemented, and extensively read the EXACT code from their documentation as below but have a problem:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarNav">

    <ul class="navbar-nav">

      <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="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled</a>

      </li>

    </ul>

  </div>

</nav>

The navbar appears as reversed (icon on right of screen, menu toggle on left), and the toggle button does not do anything, and is infact collapsed by default. I have tried in Codepen and the same thing happens, I've also tried countless CSS amends in the Chrome dev tool and still no clue.

Am I missing something embarrassingly basic trying to set this up? Can anyone explain why I'm seeing a reversed and inactive navbar from this code? Navbar is the biggest reason I'm using this framework so really want to get it working and understand it! Thanks in advance for tips and advice.

For reference here's the Bootstrap 4 Navbar page

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

The website you linked to is the latest ALPHA version of Bootstrap. It's now in BETA.

The Navbar class toggleable has been changed to expand.

Make that one change on your navclass and you'll see the difference.

Here's the page you should visit for reference https://getbootstrap.com/docs/4.0/components/navbar/

Navbar in Bootstrap 4 reversed and toggle inactive

Sign up