Bootstrap 4 - Horizontally Align Inline Lists

Question

I'm migrating a website from Bootstrap 3.7 to Bootstrap 4. In my site, I have a banner across the top that looks like this:

+-----------------------------------------------------------+
| Item 1   Item 2                      Item A Item B [note] |
+-----------------------------------------------------------+

The items in the left are dynamic. The items on the right are dynamic. The [note] piece shows occasionally. I had this working correctly with Bootstrap 3.7. However, when migrating to Bootstrap 4, the content is all left aligned. You can see the result in this Bootply. The code looks like this:

<nav class="navbar">
  <div class="d-inline-flex" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>

    <ul class="nav list-inline justify-content-end">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>                
    </ul>

    <div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
  </div>
</nav>

I don't understand why the items are all left-aligned instead of filling the width of the page. What am I missing?

score 6 · Accepted Answer · answered Aug 29 '17 at 14:33

As explained here float won't work in the navbar since it's now flexbox. Use ml-auto to push the items to the right.

<nav class="navbar">
  <div class="d-inline-flex" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>
    <ul class="nav list-inline ml-auto">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>                
    </ul>
    <div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
  </div>
</nav>

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

Or, you can use mr-auto on the first nav.

score 0 · Answer 2 · answered Aug 29 '17 at 14:31

Could you put your [note] item in with your second unordered list and and use justify-content-between in your wrapping div element? It would look something like this...

<nav class="navbar">
  <div class="d-inline-flex justify-content-between" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>

    <ul class="nav list-inline">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>
      <li class="list-inline-item">[note]</li>
    </ul>

  </div>
</nav>

Bootstrap 4 - Horizontally Align Inline Lists

2 Answers2