title: How to align search form in navbar with bootstrap grid?
body: <p>I have a search form to the navbar in a bootstrap 3 based web app. I want the search form to align with the grid's 4th column (col-md-offset-3 if nav is wrapped in container), since the body is aligned to that column.</p>
  
  <p>I have tried using a container and container fluid div with the form having class col-md-offset-3, and also changing the width and offset of the brand column, but the alignment doesn't happen.</p>
  
  <p>Here is the screenshot (red lines show the vertical lines I want to line up):</p>
  
  <p><img src="https://i.stack.imgur.com/8x30b.png" alt="enter image description here"></p>
  
  <p>And here is the markup that produces this screenshot:</p>
  
  <pre><code>&lt;body&gt;
    &lt;nav role="navigation" class='navbar'&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand col-md-3" href='#'&gt;
              My&amp;nbsp;App
            &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
  
            &lt;ul class="nav navbar-nav"&gt;
                  &lt;form accept-charset="UTF-8" class="navbar-form col-md-6" role="search"&gt;
                  &lt;input class="form-control search-text-field" id="q" name="q" placeholder="Search" type="text" /&gt;
                  &lt;input class="btn btn-default search-go-button" name="commit" type="submit" value="Go" /&gt;   
                &lt;/form&gt;            
            &lt;/ul&gt;
          &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
        &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
    &lt;/nav&gt;
    &lt;div class='row'&gt;
      &lt;div class='col-md-offset-3 col-md-6'&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elementum odio, vel malesuada felis. Mauris fringilla arcu ex, non porta sem rutrum non. Phasellus varius urna sit amet venenatis vulputate. Ut eget nunc sodales, scelerisque est et, ullamcorper mi. Nunc maximus id nisi eget pellentesque. Sed imperdiet nulla quis magna ornare ornare. Aenean condimentum tortor odio, a fringilla nisi cursus a.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>