Boostrap grid not aligning due to different image sizes - html

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;
}