Issue with lack of spacing between nested rows in Bootstrap3

Question

New learner here. I am having an issue with the lack of spacing between my 2 rows nested inside my .col-md-10 div. Right now my code looks like this:

  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="page-header">
          <h3>Portfolio</h3>
        </div> <!--.page-header-->

        <div class="row center-block">
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
        </div> <!--.row-->

        <div class="row center-block">
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
        </div> <!--.row-->

      </div> <!--.panel-body-->
    </div><!--.panel panel-default-->
  </div><!--.col-md-10-->

</row><!--.row-->

Here is what it looks like on the screen.

I originally separated the images into two .row center-block divs (instead of all .col-md-4 divs being in one .row div) based on the "offsetting columns" example on the Bootstrap website, however it did not change what is rendered on the screen.

If this is helpful, here is all of my code for my project. Thanks in advance!

Answer 1

In the Twitter Bootstrap , there is normally no space between the rows. So, you need to add a margin by yourself. You can create a class and add it to your second row. For instance:

.row-space{ 
    margin-top:10px; 
}

Then,

<div class="row center-block row-space">
    //The content goes here
</div>

Answer 2

Building off of LVarayut's answer, I ended up adding a margin-top to all .col-md-4 divs in order to adjust the spacing between the rows. In addition, I combined the two .row center-block divs into one div and added a .col-xs-6 class, which will now render 2 images per row on mobile and tablet sizes. Here is my new code:

  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="page-header">
          <h3>Portfolio</h3>
        </div> <!--.page-header-->

        <div class="row center-block">
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
        </div> <!--.row-->

      </div> <!--.panel-body-->
    </div><!--.panel panel-default-->
  </div><!--.col-md-10-->

Here is where I added a margin-top to achieve the spacing:

 .col-md-4, .col-xs-6 {
   margin-top: 20px;
 }