title: Bootstrap navbar some item centered and others to the right
body: <p>I'm building my NavBar in ReactJS using bootstrap 4.</p>
  
  <p>I would like to take some element at the center of the navbar and others on the right.</p>
  
  <p>In this particular case I would like to have the logout icon on the right.</p>
  
  <p>This is the current situation:</p>
  
  <p><a href="https://i.stack.imgur.com/Caa6G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Caa6G.png" alt="current situation"></a></p>
  
  <p>This is the current code:</p>
  
  <pre><code>render () {
          return (
              &lt;nav className="navbar navbar-dark bg-primary fixed-top"&gt;
                  &lt;Link className="navbar-brand" to="/"&gt;
                      App
                  &lt;/Link&gt;
  
                  {
                      !localStorage.getItem('token') &amp;&amp;
                      &lt;button className="btn btn-dark" onClick={this.loginClicked}&gt;Login&lt;/button&gt;
                  }
                  {
                      localStorage.getItem('token') &amp;&amp;
                      &lt;div className="mx-auto order-0"&gt;
                          &lt;button className="btn btn-primary btn-lg navbar-btn"&gt;
                              &lt;i class="fas fa-file-invoice-dollar fa-lg"&gt;&lt;/i&gt;
                              &lt;sup className="notification-badge"&gt;&lt;span class="badge badge-success"&gt;1&lt;/span&gt;&lt;/sup&gt;
                          &lt;/button&gt;
                          &lt;button className="btn btn-primary btn-lg navbar-btn"&gt;
                              &lt;i class="fas fa-envelope fa-lg"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          &lt;button className="btn btn-primary btn-lg navbar-btn"&gt;
                              &lt;i class="fas fa-cogs fa-lg"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          &lt;button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}&gt;
                              &lt;i class="fas fa-sign-out-alt fa-lg"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
  
                  }
              &lt;/nav&gt;
          );
      }
  </code></pre>
  
  <p>And this is what I would like to have:</p>
  
  <p><a href="https://i.stack.imgur.com/sciob.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sciob.png" alt="what I want"></a></p>