How to remove whitespace on css - html

Question

How to remove this whitespace ->
I want to make that two image in the bottom to move up like the one on the right.
I think I shouldn't use col-md-* but still dont get the idea.
.portfolio {
}
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="portfolio col-md-10-col-md-offset-1">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>Wongilang.xyz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>Wongilang.xyz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

It seems like your images have different height so you can see the white space below the first image and second image aren't the same and the last 2 images appear right after the 4th image (intanrahmadhani.web.id).
You can either resize/crop these images to make sure the height is consistent or apply a fixed height to the image container.
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.portfolio-item > a:link,
.portfolio-item > a:visited {
display: block;
height: 300px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="portfolio">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x650" alt="">
<h3>Wongilang.xyz</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x450" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x250" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x550" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x350" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x750" alt="">
<h3>Wongilang.xyz</h3>
<p>...</p>
</div>
</div>
</div>