title: Bootstrap navbar button and form alignment
body: <p>My Bootstrap 3 navbar-btn alignment is not inline with the navbar-form. Before I get into customising the CSS, I'd like to know if my issue is in the Bootstrap markup.</p>
  
  <p>Screenshot
  <img src="https://i.stack.imgur.com/x6CsB.png" alt="Screenshot"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top navbar-inverse"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-2 col-sm-4"&gt;
              &lt;button type="button" class="btn btn-primary navbar-btn" data-toggle="offcanvas"&gt;&lt;i class="fa fa-th-list fa-fw"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;&lt;!-- /.col-xs-2.col-sm-4 --&gt;
            &lt;div class="col-xs-8 col-sm-4"&gt;
              &lt;form class="navbar-form" role="search"&gt;
                &lt;div class="input-group"&gt;
                  &lt;input type="search" class="form-control" placeholder="Search"&gt;
                  &lt;span class="input-group-btn"&gt;
                    &lt;button type="button" class="btn btn-primary"&gt;&lt;i class="fa fa-search fa-fw"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/span&gt;
                &lt;/div&gt;&lt;!-- /.input-group --&gt;
              &lt;/form&gt;
            &lt;/div&gt;&lt;!-- /.col-xs-8.col-sm-4 --&gt;
            &lt;div class="col-xs-2 col-sm-4"&gt;
              &lt;button type="button" class="btn btn-primary navbar-btn"&gt;&lt;i class="fa fa-cog fa-fw"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;&lt;!-- /.col-xs-2.col-sm-4 --&gt;
          &lt;/div&gt;&lt;!-- /.row --&gt;
        &lt;/div&gt;&lt;!-- /.container --&gt;
      &lt;/nav&gt;&lt;!-- /.navbar --&gt;
  </code></pre>
  
  <p>Bootlint doesn't find any errors and markup is valid HTML 5.</p>
  
  <p>Any thoughts?
  Thank you.</p>