title: Bootstrap inline form with labels above input
body: <p>I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up. <br/>
  This is what i tried:<br/></p>
  
  <pre><code>&lt;form id="form" method="post" class="form-inline" &gt;
     &lt;div class="row"&gt;
       &lt;div class="col-md-2"&gt;               
          &lt;label for="from"&gt;from:&lt;/label&gt;
          &lt;input type="text" class="form-control form-text" /&gt;
       &lt;/div&gt;
       &lt;div class="col-md-2"&gt;
          &lt;label for="to"&gt;to:&lt;/label&gt;
          &lt;input type="text" class="form-control form-text"/&gt;
       &lt;/div&gt;
       &lt;div class="input-group date col-md-2" id="datepicker"&gt;
          &lt;label for="checkin"&gt;check in&lt;/label&gt;
          &lt;input type="text" class="form-control datepicker" name="processdate" /&gt;
          &lt;span class="input-group-addon btn"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt; &lt;/span&gt;
       &lt;/div&gt;
       &lt;div class="input-group date col-md-2" id="datepicker"&gt;
          &lt;label for="checkout"&gt;check out&lt;/label&gt;
          &lt;input type="text" class="form-control datepicker" name="processdate" /&gt;
          &lt;span class="input-group-addon btn"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt; &lt;/span&gt;
       &lt;/div&gt;
       &lt;div class="col-md-2"&gt;
          &lt;input type="submit" class="btn btn-default" value="submit"/&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>this is what i got:<br/>
  <a href="http://i.stack.imgur.com/XrsKd.png" rel="nofollow">result</a> <br/>
  how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?</p>