For proper alignment, the "Login" button needs to be pushed to the right of the navbar alongside other buttons. To see the issue and the code, check out this JSFiddle example: https://jsfiddle.net/sterlingmd17/tk17zjfq/1/
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{a}}"> <a href="/">Home</a></li>
<li class="{{b}}"> <a href="#order">Order form</a></li>
<li class="{{c}}"> <a href="#about">About Swirlz</a></li>
<li class="{{d}}"> <a href="#contact">Contact</a></li>
<!--Adjust login button positioning here-->
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
</div>
</ul>
</div>
</nav>