title: bootstrap form controls- custome widths
body: <p>If I include <code>&lt;div class="input-group"&gt;</code> control seems shorter, if I remove this div then they are exapnding. I am just trying to understand what is happening by adding input-group and form-group classes to the form. Could someone explain ?</p>
  
  <p><a href="http://jsfiddle.net/dUG4f/3/" rel="nofollow">http://jsfiddle.net/dUG4f/3/</a></p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="col-xs-6"&gt;
                      &lt;div class="panel panel-primary"&gt;
                           &lt;div class="panel-heading"&gt;&lt;h3 class="panel-title"&gt;Application Information&lt;/h3&gt;&lt;/div&gt;
                           &lt;div class="panel-body"&gt;
  
                                  &lt;div class="row"&gt;
                                  &lt;div class="col-lg-6 col-lg-6"&gt;
                                     &lt;div class ="form-group"&gt;
                                          &lt;label for="text" &gt;Contract State&lt;/label&gt;       
                                          &lt;div class="input-group"&gt;    
                                              &lt;select name="State" id="State" class="validate[required] form-control"&gt;
                                              &lt;option value=""&gt;Choose a State&lt;/option&gt;                    
                                              &lt;option value="IL"&gt;Illinois&lt;/option&gt;
                                              &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
                                              &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
                                              &lt;/select&gt;                                                       
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class ="form-group"&gt;
                                          &lt;label for="text" &gt;Application Number&lt;/label&gt;       
                                           &lt;div class="input-group"&gt;   
                                          &lt;input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" /&gt;                                           
                                          &lt;/div&gt;   
                                      &lt;/div&gt;                                      
  
  
                               &lt;/div&gt; &lt;!-- col-lg-6 col close --&gt;
                              &lt;/div&gt; &lt;!-- row close --&gt;
                           &lt;/div&gt; &lt;!--  End of panel Body --&gt;     
                      &lt;/div&gt;&lt;!--  End of panel  --&gt;       
                  &lt;/div&gt; &lt;!-- end col-xs-6 --&gt;
  
              &lt;div id ="panel2" class="col-xs-6"&gt; 
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel-heading"&gt;&lt;h3 class="panel-title"&gt;Initial Premium&lt;/h3&gt;&lt;/div&gt;
                          &lt;div class="panel-body"&gt;                                
  
                          &lt;/div&gt;      
                  &lt;/div&gt;  
              &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- End of second row --&gt;
  </code></pre>