title: Align Checkbox with Label and Other Input Elements
body: <p>Using Bootstrap 3, I am trying to align adjacent input elements with my label which is intended to be grouped with a checkbox. At the moment, the checkbox and label are displayed a few pixels below the search query box and button. The brand name also appears to be a few pixels higher.</p>
  
  <p>On Bootply: <a href="http://www.bootply.com/6tJSBqZ2d5" rel="nofollow">http://www.bootply.com/6tJSBqZ2d5</a></p>
  
  <pre><code>&lt;div class="container row navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" href="#"&gt;Brand Name&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;form class="navbar-form navbar-right" id="search-form" method="get" name="search-form"&gt;
              &lt;div class="input-append"&gt;
                  &lt;input class="form-control" id="query" name="query" placeholder="Search..." value=""&gt; &lt;button class="btn btn-info" type="submit"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
  
                  &lt;div class="checkbox"&gt;
                      &lt;h3&gt;&lt;span class="label label-default"&gt;Refresh
                      &lt;input type="checkbox"&gt;&lt;/span&gt;&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What is the proper way to align all elements and have them properly spaced?</p>