Adding captions under images distrupts bootstrap image grid - html

Question

I'm making a simple product portfolio and using Bootstrap 3. Without captions my images look like this:
When I add captions under them they look like this:
I want them to stay like in picture one but with added captions below them.
Here is the HTML(with captions):
<div class="works-list type-one">
<div class="row">
#foreach($proizvodi as $proizvod)
<div class="col-md-3 col-sm-6">
<div class="work-item">
<div class="wi-over">
<h4>{{ $proizvod->naziv }}</h4>
<ul class="clearfix">
<li><img class="img-responsive"></img></li>
<li><i class="fa fa-file-text-o"></i></li>
</ul>
</div>
<img src="{{ $proizvod->slika_url }}" alt="Work Name" class="img-full-border">
</div>
<div class="row">
<div style="padding-top: 5px;">
<h5 style="font-weight:bold; font-size: 12px; text-align:center;">{{ mb_strtoupper($proizvod->naziv) }}</h5>
</div>
</div>
</div>
#endforeach
</div>
<div class="row">
<div style="text-align:center;">
{!! $proizvodi->render() !!}
</div>
</div>
</div>
I'm using Laravel so blade code is included.
Here are the related css classes:
.works-list.type-one{
margin-bottom : -30px;
}
.works-list.type-one .row div[class*="col-"]{
margin-bottom : 30px;
}
.works-list.type-one .work-item{
position : relative;
}
This problem only occurs when the caption is longer than 1 line.
Any ideas?

Answer 1

.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 0px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.row {
margin-right: 0px;
margin-left: 0px;
}