How to get bootstrap v4alpha6 navigation list to justify right? - css

Question

So apparently the alpha 6 version of bootstrap 4 has gone all flex, which has broken some of the stuff I was using in alpha 5. As per this fiddle , I'm trying to get the flex justification class to put the navigation bar content over on the right, like so:
<ul class="navbar-nav justify-content-end">
Inspecting the elemnt shows that is has the justify-content: flex-end !important; on it, so I would have expected it to work. Why doesn't it?

Answer 1

To right align the .navbar-nav on desktop devices you need to place the .justify-content-end class on its parent:
add .justify-content-end class to #navbarSupportedContent.
If you want to right align the mobile menu on the right side:
.text-right (instead of .justify-content-end) on your .navbar-nav and
.justify-content-end on your .form-inline.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#replaceThisWithYourOwnId" aria-controls="replaceThisWithYourOwnId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">BrandName</a>
<div class="collapse navbar-collapse justify-content-end" id="replaceThisWithYourOwnId">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link ">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 justify-content-end">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>