title: Bootstrap - Reducing spacing between form-controls like textbox and label
body: <p>I'm developing the a .NET(C#) MVC web-application.
  I have the following bootstrap drop-down menu.</p>
  
  <p>I'm trying to achieve the following two things :</p>
  
  <ul>
  <li><p>1) <strong>I'm trying to reduce the spacing between a label and it's respective text-box</strong>. I tried using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label" but then the textbox overlapped the label. </p></li>
  <li><p>2) I want to reduce the height of the textbox.</p></li>
  </ul>
  
  <p>How can I achieve these?</p>
  
  <p>here's my cshtml code :</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  
      &lt;div class="input-group" id="adv-search"&gt;
          &lt;input type="text" class="form-control" placeholder="Search" id="searchBar" /&gt;
  
          &lt;div class="input-group-btn"&gt;
  
              &lt;div class="btn-group" role="group"&gt;
  
                  &lt;button type="button" class="btn btn-primary" onclick="ReloadData()"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"&gt;&lt;/span&gt;&lt;/button&gt;
  
                  &lt;div class="dropdown dropdown-lg"&gt;
                      &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"&gt;&lt;/button&gt;
  
                      &lt;div class="dropdown-menu dropdown-menu-right" role="menu"&gt;
                          &lt;form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA"&gt;
                              &lt;br /&gt;
  
                              &lt;div class="form-group row"&gt;
                                  &lt;label for="RequestNo" class="col-xs-2 col-form-label"&gt;Request No.&lt;/label&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" /&gt;
                                  &lt;/div&gt;
  
                                  &lt;label for="ReferenceNo" class="col-xs-2 col-form-label"&gt;Reference No.&lt;/label&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" /&gt;
                                  &lt;/div&gt;
  
                                  &lt;label for="RequestNo" class="col-xs-2 col-form-label"&gt;Request No.&lt;/label&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input class="form-control" type="text" id="txtCreatedBy" /&gt;
                                      @*@Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*@                             
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group row"&gt;
                                  &lt;label for="RequestNo" class="col-xs-2 col-form-label"&gt;Request No.&lt;/label&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" /&gt;
                                  &lt;/div&gt;
  
                                  &lt;label for="RequestNo" class="col-xs-2 col-form-label"&gt;Request No.&lt;/label&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" /&gt;
                                  &lt;/div&gt;
  
                                  &lt;label for="RequestNo" class="col-xs-2 col-form-label"&gt;Request No.&lt;/label&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                             //and so on
  
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters"&gt;
                      &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here's my CSS code :</p>
  
  <pre><code>.dropdown.dropdown-lg .dropdown-menu {
      margin-top: -1px;
      padding: 6px 20px;
  }
  .input-group-btn .btn-group {
      display: flex !important;
  }
  .btn-group .btn {
      border-radius: 0;
      margin-left: -1px;
  }
  .btn-group .btn:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
  }
  .btn-group .form-horizontal .btn[type="submit"] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .form-horizontal .form-group {
      margin-left: 0;
      margin-right: 0;
  }
  .form-group .form-control:last-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
  }
  
  @media screen and (min-width: 1000px) {
      #adv-search {
          width: 1110px;
          margin: 0 auto;
      }
      .dropdown.dropdown-lg {
          position: static !important;
      }
      .dropdown.dropdown-lg .dropdown-menu {
          min-width: 1110px;
      }
  }
  </code></pre>