title: How to center navbar in Bootstrap 4 using Flexbox
body: <p>Well, I want to achieve this thing: </p>
  
  <p><img src="https://i.imgur.com/BDM7JvD.jpg" alt=""></p>
  
  <p>using the Bootstrap 4 Navbar.</p>
  
  <p>How can I centralize the nav-links/items in the middle of the viewport using the flexbox or <code>.mr-auto</code> etc utilities. I am trying to avoid a CSS based positioning approach because it may look off on different devices. But sure if a CSS approach promises to be at the same centralized position then why not!</p>
  
  <p>NOTE: some ppl might say to use the justify utilities, the problem is you can't use them as the <code>.navbar-brand</code> and the <code>.navbar-nav</code> can't be wrapped inside a <code>&lt;div&gt;</code>. If I do so, the layout messes up.</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom"&gt;
  
      &lt;div class="container"&gt;
  
          &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;a class="navbar-brand" href="#"&gt;&lt;img src="img/nav-logo.png" alt="logo" class="nav-logo"&gt;&lt;/a&gt;
  
          &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav ml-auto mr-auto"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Disabled&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/nav&gt;
  </code></pre>