title: bootstrap reduce spacing between rows
body: <p>Bootstrap 3.3.5</p>
  
  <p>I'm trying to reduce the amount of spacing between rows:</p>
  
  <p><img src="https://i.stack.imgur.com/HnV7X.jpg" alt="enter image description here"></p>
  
  <p>Ive tried adding removing margins &amp; padding on the row but doesnt seem to change anything:</p>
  
  <pre><code>&lt;div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; border: solid 1px red; padding-top: 0px !important; padding-bottom: 0px !important;"&gt;
  </code></pre>
  
  <p>These are the possible solutions to remove the spacing but doesnt seem to work for me.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
  
      &lt;div class="row" style=" border: solid 1px red; overflow: hidden; "&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"&gt;&lt;/div&gt;
  
          &lt;div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right"&gt;
  
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="form-group" style=""&gt;
                      &lt;label
                      class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                      style="font-size: .8em;"&gt;Start Total:&amp;nbsp;&lt;/label&gt;
  
                      &lt;div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;"&gt;
                          &lt;input type="text" class="form-control input-sm text-left" id="startCount" readonly="readonly" style=""&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
  
          &lt;div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left "&gt;
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label
                      class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                      style="font-size: .8em;"&gt;Inmate Total:&amp;nbsp;&lt;/label&gt;
  
                      &lt;div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;"&gt;
                          &lt;input type="text" class="form-control input-sm text-left" id="total" readonly="readonly" style=""&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;                  
  
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div class="clearfix"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row" style=""&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"&gt;&lt;/div&gt;
  
          &lt;div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right"&gt;
  
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="form-group" style=""&gt;
                      &lt;label
                      class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                      style="font-size: .8em;"&gt;Booked:&amp;nbsp;&lt;/label&gt;
  
                      &lt;div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;"&gt;
                          &lt;input type="text" class="form-control input-sm text-left" id="book" readonly="readonly"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
  
  
          &lt;div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left"&gt;
  
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="form-group" style=""&gt;
                      &lt;label
                      class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                      style="font-size: .8em;"&gt;Out House:&amp;nbsp;&lt;/label&gt;
  
                      &lt;div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;"&gt;
                          &lt;input type="text" class="form-control input-sm text-left" id="house" readonly="readonly"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
  
  
  
  
          &lt;div class="clearfix"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update: 1</strong></p>
  
  <p>If I modify the row style to have the following:</p>
  
  <pre><code>style="margin-bottom: -10px !important; padding-bottom: -10px !important; margin-top: -10px !important; padding-top: -10px !important; outline: solid 1px green;"
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/QVkw2.jpg" alt="enter image description here"></p>
  
  <p>The row is outline does move up but the space is still there</p>