Boostrap grid not aligning due to different image sizes

Question

I am using Bootstrap to present my projects.

I am trying to have 3 images in each row. However, the problem is all images have all slightly different sizes.

This has caused my images to skip some (so some rows will only have 1 image).

Here is an example

http://bosung.info/#portfolio

What I want is like 2d grid where exactly 3 images in each row without skipping any spots. I don't want to stretch any images so it would be just empty spaces to make all the images same height/width ratio.

I also want to make sure this works even when the screen is smaller (I don't want to make image height absolute)

CSS I have used:

<div class="row">
<div class="col-sm-4 portfolio-item">
    <a href="#bubble-fighter" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/bubble-fighter.jpg" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#doomsday-shopping" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/doomsday-shopping.jpg" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#magic101" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/magic101_3.png" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#travel-smart" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/travel-smart.png" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#union-of-swords" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/union-of-swords.png" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#bear-boat-adventure" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/bear-boat-adventure9.jpg" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#translink-me" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/translink-me.png" class="img-responsive" alt="">
    </a>
</div>
<div class="col-sm-4 portfolio-item">
    <a href="#transit-alarm" class="portfolio-link" data-toggle="modal">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
            </div>
        </div>
        <img src="img/portfolio/transit-alarm.png" class="img-responsive" alt="">
    </a>
</div>
</div>

Answer 1

Adding clear both on (1, 4, 7 & 10 ...)

#portfolio .portfolio-item:nth-child(3n+1) {
  clear: both;
}