Bootstrap 4 pull one of many navbar links to the right

Question

I am currently having issues trying to pull one of many navbar links to the right. Specifically, in this example, I'd like to pull only the logout link to the right of the nav bar. I have tried many things such as justify-content-end at the navbar class level which pulls all links to the right, ml-auto which had no effect, pull-right as I have done in previous versions of bootstrap and style float:right because im running out of ideas :P See nav bar below. all help is appreciated

<nav class="navbar navbar-toggleable-md">
    <div>
        <span class="navbar-brand text-color">MYlestone</span>
    </div>
    <div>
        <div class="navbar-nav">
            <a class="nav-item nav-link" href="#" [routerLink]="['babyprofiles']">My Content</a>
            <a class="nav-item nav-link" href="#" [routerLink]="['about']">About</a>
            <a class="nav-item nav-link pull-right" href="#" (click)="logout()">Logout</a>
        </div>
    </div>
</nav>

Make your navbar a snippet so it can run on this page. – ProEvilz Jan 04 '18 at 14:14 — ProEvilz, Jan 04 '18 at 14:14

score 6 · Accepted Answer · answered Jan 04 '18 at 14:25

Well .pull-* isn't going to work because it was dropped in Bootstrap 4 in favor of .float-* You're on the right track with .ml-auto though; you're just not applying it at the correct point.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand navbar-light bg-light">
  <span class="navbar-brand text-color">MYlestone</span>
 
  <div class="navbar-nav w-100">
    <a class="nav-item nav-link" href="#">My Content</a>
    <a class="nav-item nav-link" href="#">About</a>
      
    <div class="ml-auto">
      <a class="nav-item nav-link" href="#">Logout</a>
    </div>
  </div>
</nav>

First you need to add .w-100 to your .navbar-nav to make sure that that element takes up 100% of the remaining space. Then you need to wrap your final .nav-link in a wrapper with .ml-auto applied.

One caveat I would offer; there might be a better way: There is no reason you cannot have multiple .navbar-nav elements. As long as they are within the same collapse they'll condense down into your hamburger menu should you opt to use it.

The following code would achieve the same results as the above; just utilizing multiple navigational menus:

<nav class="navbar navbar-expand navbar-light bg-light">
  <span class="navbar-brand text-color">MYlestone</span>

  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#">My Content</a>
    <a class="nav-item nav-link" href="#">About</a>
  </div>

  <div class="navbar-nav ml-auto">
    <a class="nav-item nav-link" href="#">Logout</a>
  </div>
</nav>

using this solution, my links are only being pulled right when i look at the mobile view. The full web browser view for the first solution is the same with all the links toward the left. The full web browser view for the second solution puts the Logout link on a new line below the first 2 links and it is still justified to the left. I see the example you linked so it must be something with my environment. Thanks for the answer — GregH, Jan 04 '18 at 14:36

Bootstrap 4 pull one of many navbar links to the right

1 Answers1