Angular 2 Bootstrap 4 navigation bar, vertically not horizontal

Question

When you follow the instructions of Angular 2 in Rails 5, which implements bootstrap 4, I built Navbar exactly as it was in the tutorial, but for some reason my navigator appears vertically when it should appear horizontally. Any ideas on how to fix this? thanks in advance

<nav class="navbar navbar-fixed-top navbar-light bg-faded"> <div class='container'> <ul class="nav navbar-nav"> <li class='nav-item'> <a class='nav-link' routerLink="/home" routerLinkActive="active">Home</a> </li> <li class='nav-item'> <a class='nav-link' routerLink="/documents" routerLinkActive="active">Docs</a> </li> <li class="nav-item dropdown"> <div ngbDropdown class="d-inline-block dropdown-links"> <button class="btn btn-outline-primary" id="proposalDropdown" ngbDropdownToggle> Proposals </button> <div class="dropdown-menu" aria-labelledby="proposalDropdown"> <a class="dropdown-item" routerLink="/proposals" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true}">Proposals</a> <a class="dropdown-item" routerLink="/proposals/new" routerLinkActive="active">New Proposal</a> </div> </div> </li> </ul> </div> </nav> 

Answer 1

Add navbar-toggleable-sm ( md / lg ) to the nav element to make it horizontal to sm , otherwise it will be displayed vertically every time.

 <nav class="navbar navbar-toggleable-sm navbar-fixed-top navbar-light bg-faded"> .... </nav> 

Demo plunker

Answer 2

Bootstrap 4 requires you to add navbar-expand-md to your open navigation classes, otherwise it will be vertical.

 <nav class="navbar navbar-fixed-top navbar-expand-md navbar-light bg-faded"> 

You can replace md with xs , lg or sm for different breakpoints.

Go to the Bootstrap 4 Navbar documentation and see the first example.