Centering the navbar content in Bootstrap 4 (alpha 5)
<p>I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving <code>d-block</code> and <code>mx-auto</code>. </p>

<p>However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them. </p>

<p>Sample navbar code I am playing with:.</p>

<pre><code>&lt;nav class="navbar navbar-light bg-faded"&gt;
  &lt;ul class="nav navbar-nav"&gt;
    &lt;li class="nav-item active"&gt;
      &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Dropdown link
      &lt;/a&gt;
      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p><a href="https://jsfiddle.net/losol/19vcjwo4/" rel="noreferrer">JSFiddle if you like</a></p>