Reduce spacing between rows

Question

I am using Bootstrap grid system. The spacing between rows is too large.

How can I reduce it?

<div class="row">
  <div class="col-md-6">
    <h1 id="Heading"> Heading </h1>
    <div class="row" style="margin-left:6px;">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span  </span> </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span  </span> </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span  </span> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<div>

Answer 1

There are 2 quick solutions possible for this:

1. Edit bootstrap core css/sass which will be a bad idea as it will affect core functionality of page scaffolding.
2. Write a separate class and add it in your div for ex:

.row-bottom-margin { margin-bottom:20px; }

and you can use it as

<div class="row row-bottom-margin">

Option 1 is not suggested until unless you are really looking for this change to be applied at all the relevant places and do consider your future designs.

Hope this helps!

Answer 2

By default, row elements expands in related to their childs. So your problem is not in .row class but in #rect

On rect element you have a line-height of 1.4 by default bootstrap css. Make it a class rather than id.

You can reduce it to 1.2 for your case... Do it on a separate css file and overwrite it. That would be a better design for you.

 .rect {        
    line-height: 1.2; // overwrite it on a different css if you prefer        
}

Answer 3

Using Bootstrap 4 now you no more need to use any CSS for this as it has utility classes for this purpose.