title: Bootstrap form - reducing the height
body: <p>Have a form with 17 rows (each row around 2-3 controls). Copied my sample html below.</p>
  
  <p>1) Have a requirement to reduce the height by half to all the controls. Beginner with Bootstrap and currently struck.</p>
  
  <p>2) Also how to control the input size of the text fields.</p>
  
  <p>3) Also would like to use fieldset around some controls. </p>
  
  <p>Any pointer is appreciated.</p>
  
  <p>Thanks,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet"
      href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;form class="form-horizontal" role="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row11"&gt;Label11:&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;input type="text" class="form-control" id="row11"
                              placeholder="Data 11"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row12"&gt;Label12:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-6"&gt;
                          &lt;input type="text" class="form-control" id="row12"&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-offset-2 col-sm-1"&gt;
                          &lt;label class="control-label" for="row21"&gt;Label21:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-1"&gt;
                          &lt;input type="text" class="form-control" id="row21"
                              placeholder="Data21"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row22"&gt;Label22:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-1"&gt;
                          &lt;input type="text" class="form-control" id="row22" placeholder="Data 22"&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
  
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row31"&gt;Label31:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-1"&gt;
                          &lt;input type="text" class="form-control" id="row31"
                              placeholder="Data31"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row41"&gt;Label41:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-8"&gt;
                          &lt;input type="text" class="form-control" id="row41"
                              placeholder="Data41"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
  
  
                      &lt;div class="col-sm-offset-1 col-sm-8"&gt;
                          &lt;input type="text" class="form-control" id="row41"
                              placeholder="Data42"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row51"&gt;Label51:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;input type="text" class="form-control" id="row51"
                              placeholder="Data51"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row61"&gt;Label61:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;input type="text" class="form-control" id="row61"
                              placeholder="Data61"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-3 col-sm-1"&gt;
                          &lt;label class="control-label" for="row62"&gt;Label62:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;input type="text" class="form-control" id="row62"
                              placeholder="Data62"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row71"&gt;Label71:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;input type="text" class="form-control" id="row71"
                              placeholder="Data71"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-3 col-sm-1"&gt;
                          &lt;label class="control-label" for="row72"&gt;Label72:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;div class="dropdown"&gt;
                              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
      Ddown
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row81"&gt;Label81:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;input type="text" class="form-control" id="row81"
                              placeholder="Data81"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-3 col-sm-1"&gt;
                          &lt;label class="control-label" for="row82"&gt;Label82:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;div class="dropdown"&gt;
                              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
      Ddown
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row91"&gt;Label91:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-3"&gt;
                          &lt;input type="text" class="form-control" id="row91"
                              placeholder="Data91"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-2 col-sm-1"&gt;
                          &lt;label class="control-label" for="row92"&gt;Label92:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-1"&gt;
                          &lt;div class="dropdown"&gt;
                              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
      Ddown
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row101"&gt;Label101:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-3"&gt;
                          &lt;input type="text" class="form-control" id="row101"
                              placeholder="Data10-1"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-2 col-sm-1"&gt;
                          &lt;label class="control-label" for="row10-2"&gt;Label102:&lt;/label&gt;
                      &lt;/div&gt;
  
  
                          &lt;div class="col-sm-1 dropdown"&gt;
                              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
      Ddown
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row11-1"&gt;Label111:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-3"&gt;
                          &lt;input type="text" class="form-control" id="row11-1"
                              placeholder="Data11-1"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-2 col-sm-1"&gt;
                          &lt;label class="control-label" for="row11-2"&gt;Label112:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-1"&gt;
                          &lt;div class="dropdown"&gt;
                              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
      Ddown
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row12-1"&gt;Label121:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-3"&gt;
                          &lt;input type="text" class="form-control" id="row12-1"
                              placeholder="Data12-1"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row13-1"&gt;Label131:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-4"&gt;
                          &lt;input type="text" class="form-control" id="row13-1"
                              placeholder="Data13-1"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row14-1"&gt;Label141:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-1"&gt;
                          &lt;input type="text" class="form-control" id="row14-1"
                              placeholder="Data14-1"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-offset-1 col-sm-1"&gt;
                          &lt;label class="control-label" for="row14-2"&gt;Label142:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-2"&gt;
                          &lt;input type="text" class="form-control" id="row14-2"
                              placeholder="Data14-2"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row15-1"&gt;Label151:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-8"&gt;
                          &lt;input type="text" class="form-control" id="row15-1"
                              placeholder="Data15-1"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row16-1"&gt;Label161:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-8"&gt;
                          &lt;input type="text" class="form-control" id="row16-1"
                              placeholder="Data16-1"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-1"&gt;
                          &lt;label class="control-label" for="row17-1"&gt;Label171:&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-sm-8"&gt;
                          &lt;textarea rows="3" class="form-control" id="row17-1"
                              placeholder="Data17-1"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;script
          src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script
          src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>