title: Bootstrap center icon
body: <p>I was trying to copy this:
  <a href="http://prntscr.com/gutg8b" rel="nofollow noreferrer">http://prntscr.com/gutg8b</a></p>
  
  <p>Instead I got this: 
  <a href="http://prntscr.com/gute2v" rel="nofollow noreferrer">http://prntscr.com/gute2v</a></p>
  
  <p>I used twitter bootstrap, I was wondering how can I easily mimic the first image such as the icons must stack to the links and the twitter icon must be on the center of the screen and then the avatar and the search must also stack properly next to each other.</p>
  
  <p>What should I fixed here?</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar-light bg-faded"&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;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item active"&gt;
              &lt;i class="fa fa-home fa-lg"&gt;&lt;/i&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;i class="fa fa-bell-o fa-lg"&gt;&lt;/i&gt; &lt;a class="nav-link" href="#"&gt;Notifications&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;i class="fa fa-envelope-o fa-lg"&gt;&lt;/i&gt; &lt;a class="nav-link" href="#"&gt;Messages&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div&gt;&lt;i class="fa fa-twitter fa-lg"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;form class="form-inline my-2 my-lg-0"&gt;
            &lt;input class="form-control mr-sm-2" type="text" placeholder="Search"&gt;
            &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
  
          &lt;div&gt;&lt;img src="img/avatar.jpg" alt="" style="border-radius: 50%; width: 30px;"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>