Bootstrap 4 Beta 2 Nav Bar Brand Alignment - css

Question

It's very similar to this question: bootstrap4 nav not working properly which doesn't seem to be resolved.
I was moving my app from Angular 4 to Angular 5, in the process of "npm update", I moved to "bootstrap": "4.0.0-beta.2", the NavBar Brand is now right aligned. And no matter how wide screen is, the items are collapsed.
To sort out this issue. I actually did ng new nav-app. So brand new application is created.
I then intalled Bootstrap, Jquery, Popper as mentioned in this article: http://colinstodd.com/blog/post/how-to-install-bootstrap-4-beta-in-angular-4-as-a-dependency
here is my angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
],
And I put the Nav Bar example in the official Bootstrap website: https://v4-alpha.getbootstrap.com/components/navbar/ into app.component.html
<nav class="navbar navbar-toggleable-md navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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>
</div>
</nav>
And the result looks like this:
1. The toggle (hamburger icon) works when I click on it. But the position is reversed, and doesn't matter how wide the browser window is, the hamburger icon doesn't expand.
I think the bootstrap.css is definitely working fine, since I made a button, and it has the proper bootstrap colors.
Question: how do I control when the hamburger icon appears or not? (when screen is wide, the Nav items should be shown without hamburger icon.)
And can someone explain what happened with the Beta Bootstrap? My code used to work with previous version of Bootstrap, including 4 Alpha.
My production code Nav Bar displays all Nav items correctly when screen is wide enough to show all. And it collapse at the right time. I'm trying to figure out is this a Angular 5 issue or actually Boostrap decided to go from 4 Alpha to 4 Beta and decided to completed change their css class positions.

Answer 1

The navbar-expand-* class is what you are missing.
Try adding navbar-expand-lg.
The documentation is here:
https://getbootstrap.com/docs/4.0/components/navbar/
The alpha version is hopelessly outdated!
P.S. Bootstrap 4 beta 3 is the most recent version of Bootstrap 4. The next release will be Bootstrap 4 final.