[html] In Bootstrap 3,How to change the distance between rows in vertical?

I have two rows a and b,I think the distance between the two rows in vertical is too small.

I want to make the distance more bigger,I know I can change the distance in horizontal by col-md-offset-*.But how to change the vertical distance?

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <div class="row" id="b">
      <button>..</button>
    <div>

Now my solution is insert a tag of h1,I think it is not graceful.

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <h1></h1>
    <div class="row" id="b">
      <button>..</button>
    <div>

Does it have more graceful solution?

UPDATE

Bootstrap 4 has spacing utilities to handle this https://getbootstrap.com/docs/4.0/utilities/spacing/

.mt-0 {
  margin-top: 0 !important;
}

--

ORIGINAL ANSWER

If you are using SASS, this is what I normally do.

$margins: (xs: 0.5rem, sm: 1rem, md: 1.5rem, lg: 2rem, xl: 2.5rem);

@each $name, $value in $margins {
  .margin-top-#{$name} {
    margin-top: $value;
  }

  .margin-bottom-#{$name} {
    margin-bottom: $value;
  }
}

so you can later use margin-top-xs for example

Use <br> tags

<div class="container">   
    <div class="row" id="a">
        <img src="http://placehold.it/300">
    </div>

    <br><br> <!--insert one, two, or more here-->

    <div class="row" id="b">
      <button>Hello</button>
    </div>
</div>

There's a simply way of doing it. You define for all the rows, except the first one, the following class with properties:

.not-first-row
{
   position: relative;
   top: -20px;
}

Then you apply the class to all non-first rows and adjust the negative top value to fit your desired row space. It's easy and works way better. :) Hope it helped.

use:

<div class="row form-group"></div>

Instead of adding any tag which is never a good solution. You can always use margin property with the required element.

You can add the margin on row class itself. So it will affect globally.

.row{
  margin-top: 30px;
  margin-bottom: 30px
}

Update: Better solution in all cases would be to introduce a new class and then use it along with .row class.

.row-m-t{
  margin-top : 20px
}

Then use it wherever you want

<div class="row row-m-t"></div>

If it was me I would introduce new CSS class and use along with unmodified bootstrap row class.

HTML

<div class="row extra-bottom-padding" id="a">
   <img>...</img>
<div>
<div class="row" id="b">
   <button>..</button>
<div>

CSS

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