Bootstrap 4 Navbar align right - html

Question

I am working on a navbar template from Bootstrap 4 website but I'm having a problem regarding the posistion of the collapse nav items. Originally, toggle button is placed on the left side of the navbar as well as the list items.
But I want them to on the right side of the page, so I inserted a float-xs-right class on the button and nav items. Then if I click the toggle button, the collapse items are not positioned properly. As you can see on the screenshot.
Navbar screenshot
I want the collapse items to be positioned below and on the left side.
Btw, here's my code:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
Also, here's my codepen for this navbar:
http://codepen.io/marcvs/pen/PGvqBO
Thank you in advance.

Answer 1

For Bootstrap 4 Alpha 6 / Beta: Bootstrap 4 align navbar item to the right
This is the proper way to do it. You want to float the menu left by default. Float the button right (float-xs-right) on everything but it can't be seen (hidden-lg-up) and then float-lg-right the ul for it to work like you want.
See this codepen:
http://codepen.io/anon/pen/mAYAKd?editors=1100
It works fine.
Note this added CSS:
#media screen and (max-width: 992px){
#main-navbar {
clear: both;
}
}
HTML:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav float-lg-right">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>

Answer 2

Hello See the below example.Though I did It in another way but Hope you are looking for this.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Bio</li>
<li>Details</li>
<li>Award</li>
<li>More info</li>
</ul>
</div>
</nav>
See The Fiddle NavBar Fiddle Demo
Hope It Helps.