title: Bootstrap 4 menu toggle button to left and right, with brand in center
body: <p>I have a navbar menu that looks like this on large screens:</p>
  
  <p><a href="https://i.stack.imgur.com/cc6wR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cc6wR.jpg" alt="enter image description here"></a></p>
  
  <p>And collapses to this on smaller screens:</p>
  
  <p><a href="https://i.stack.imgur.com/MI1Ry.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MI1Ry.jpg" alt="enter image description here"></a></p>
  
  <p>But I would like to have one menu button to the left, the other menu button to the right, with the brand in the center. Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zNAoM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zNAoM.jpg" alt="enter image description here"></a></p>
  
  <p>I'm not sure if this is possible, and if so what the trick is?</p>
  
  <p><strong>CODE (using bootstrap 4 beta):</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;a class="navbar-brand logo-font" href="#"&gt;
          Brand
      &lt;/a&gt;
      &lt;!-- links toggle --&gt;
      &lt;button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;!-- account toggle --&gt; 
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;i class="fa fa-user"&gt;&lt;/i&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="links"&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 4&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 5&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                Other
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Dropdown 1&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Dropdown 2&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Dropdown 3&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="account"&gt;
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Log in&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><a href="https://www.codeply.com/go/21PmzA2ff3" rel="nofollow noreferrer">Link to Codeply</a></p>