title: Aligning form controls vertically in Bootstrap 3
body: <p>With a lot of help on this site and some effort of my own I finally resolved all column issues.  Now I would like to know if there is a <code>Bootstrap 3</code> way (no custom CSS) to align different form controls (Bottstrap's own as well from 3rd-parties, like <code>JQuery UI</code>) <strong>vertically</strong>.  </p>
  
  <blockquote>
    <p>Can <strong><code>&lt;form&gt;</code></strong> itself control the <strong>height</strong> (or <strong>vertical spacing</strong>) of all its children?</p>
  </blockquote>
  
  <p>Below is my example that shows real column configurations and mark-up of different form controls that purposefully do not have the same height.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container"&gt;  
              &lt;div class='row'&gt;
                  &lt;form role="form"&gt;
                      &lt;div class='col-lg-3'&gt;
                          &lt;div class='col-xs-12 col-md-6 col-lg-12'&gt;&lt;div class="form-group thumbnail"&gt;Widget 1&lt;br&gt;&lt;/br&gt;Line #2 for 1&lt;/div&gt;&lt;/div&gt;
                          &lt;div class='col-xs-12 col-md-6 col-lg-12'&gt;&lt;div class="form-group"&gt;&lt;h2&gt;Widget 2&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class='col-lg-3'&gt;
                              &lt;div class='col-xs-12 col-md-6 col-lg-12' &gt;&lt;div class="form-group thumbnail"&gt;&lt;label for="widget3"&gt;Label for 3:&lt;/label&gt;&lt;input type="text" class="form-control" placeholder="Widget 3" id="widget3"/&gt;&lt;/div&gt;&lt;/div&gt;
                              &lt;div class='col-xs-12 col-md-6 col-lg-12'&gt;&lt;div class="form-group thumbnail"&gt;&lt;p&gt;Widget 4&lt;/p&gt;&lt;/div&gt;
                      &lt;/div&gt;&lt;/div&gt;
  
                      &lt;div class='col-lg-3'&gt;
                          &lt;div class=' col-xs-12 col-md-6 col-lg-12'&gt;&lt;div class="form-group"&gt;&lt;span class="thumbnail"&gt;Widget 5&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
                          &lt;div class='col-xs-12 col-md-6 col-lg-12'&gt;&lt;div class="input group"&gt;&lt;input type="text" class="form-control" placeholder="Wdget 6"/&gt;&lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;    
          &lt;/div&gt;    
  
          &lt;!-- Latest compiled and minified JavaScripts --&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/PfA9A/" rel="nofollow"><strong>Here is</strong></a> the same as JSFiddle.</p>
  
  <p>One more thing. In the above example (but not in my real layout) <code>glyphicon</code> <code>add-on</code> does not appear to the right of <code>&lt;input&gt;</code> element but stacks underneath instead.  What did I do wrong here? Is there a typo I can't notice?<br>
  <strong>EDIT</strong> (0405/14) my "<code>input-group</code>" typo was pinpointed by <code>Arbel</code> on 04/02/14. <strong>This is no longer a problem.</strong> </p>
  
  <p><strong>Additional Questions</strong> (04/03/14):</p>
  
  <ol>
  <li><p>What pushes <code>Widget 3</code> to the right on <code>md</code> view?</p></li>
  <li><p>How can I force <code>Widget 4</code> and <code>Widget 5</code> to swap positions on <code>md</code> view (when they are in different rows? My attempt to add <code>pull-right</code> class to <code>Widget 4</code> did not produce the desired result.</p></li>
  </ol>