In bootstrap 4 beta, how to right align last nav item?

Question

I have this simple nav with three nav-items in bootstrap 4, beta:

<div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a>
      </li>
       <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a>
      </li>
       <li class="nav-item">
        <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a>
      </li>
    </ul>
 </div>

It looks like this:

What I would like, is for the nav-item called Test3 to be right aligned inside the ul.

Here is a jsfiddle.

How can I do this?

Already been answered, use `ml-auto` https://www.codeply.com/go/Og3u9kyQHS — Carol Skelly, Sep 08 '17 at 20:11
@ZimSystem .... or reset margin-left:auto to the li:last-child (css tag selected too ) — G-Cyrillus, Sep 08 '17 at 20:12

juzraai · Accepted Answer · 2017-09-09T12:30:22.477

6

You can do it by adding ml-auto to the last item. That sets the left margin to auto, which means it will take the maximum available space as margin, so it will jump to right.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a>
      </li>
       <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a>
      </li>
       <li class="nav-item ml-auto">
        <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a>
      </li>
    </ul>
 </div>

edited Sep 09 '17 at 12:30

answered Sep 08 '17 at 20:08

juzraai

5,693
8
33
47

3

It's bad for accessibility (and semantic structure in general) to break one item out of a list. Can you accomplish this without doing so? – isherwood Sep 08 '17 at 20:09
1

Yes, I updated my answer. – juzraai Sep 08 '17 at 20:11
1

I think the `w-100` is unnecessary – Carol Skelly Sep 09 '17 at 12:27
@ZimSystem You're right, thanks for pointing that out! :) I removed it. (For some reason it seemed necessary when I first wrote the code.) – juzraai Sep 09 '17 at 12:33

In bootstrap 4 beta, how to right align last nav item?

1 Answers1