Bootstrap: how to clear images in a gallery?

first a link to the site through github http://ift.tt/1HWqV7j

This is directly to the gallery.

I'm using bootstrap to create a gallery with the grid system. Unfortunately, I've been trying to get things to line up correctly for the past few days. I cant quite seem to get clearfix to work correctly, I don't know if I'm putting the code into the wrong spot into the html or not.

Also tried nth-child code, but I'm stuck on that as well.

I'll continue to research as I wait for answers, but could definitely use some help.

Here is some code snippets from my html:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"> <a    href="img/nasarow-fo-to1.jpg" class="img-thumbnail">
         <img src="img/nasarow-fo-to1.jpg" class="img-responsive img-height">
      </a></div>

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"> <a href="img/nasarow-fo-to2.jpg" class="img-thumbnail">
         <img src="img/nasarow-fo-to2.jpg" class="img-responsive img-height">
      </a></div>

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"> <a href="img/nasarow-fo-to3.jpg" class="img-thumbnail">
         <img src="img/nasarow-fo-to3.jpg" class="img-responsive img-height">
      </a></div>


  </div>

Suggestions?

In CSS I have the height limited to 300px. You can see that some of the pictures are higher than others, and I think this is what's causing the break, but just cant figure out how to keep the pictures from dropping down to the next row instead of having the 2 or 3 pictures I need in each row.

Background: student of HTML and CSS right now. Updating my site as I go through Treehouse courses.