How to have different alignment for nav-link elements in bootstrap 4?

Question

Using bootstrap 4, I have these 3 nav-link elements:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Item1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item3</a>
  </li>
</ul>

My question is this: how can I keep Item1 and Item2 left aligned (as they are now), but make Item3 right aligned?

I have created a jsfiddle here .

Answer 1

Just use ml-auto on the last item...

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Item1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item2</a>
  </li>
  <li class="nav-item ml-auto">
    <a class="nav-link" href="#">Item3</a>
  </li>
</ul>

https://www.codeply.com/go/XkfSjbcdDb

Answer 2

You can use margin-left: auto since that row is a flex parent and an auto left margin on a flex child will fill the available space.

 body { margin: 10px; } .nav li:last-child { margin-left: auto; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item3</a> </li> </ul>