Bootstrap list of thumbnails leaves empty columns - html

Question

I am trying to make a list of images with titles using Bootstrap 3.3.7, like an image gallery and I am getting this weird behaviour
I am using an unordered list-group and for every image a list-group-item:
<section>
<div class="content container">
<div class="control row">
<div class="col-md-12">
<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Upload</button>
</div>
</div>
<ul class="list-group row">
{{#each pictures}}
<li class="list-group-item col-md-3 col-xs-6 col-sm-6">
<div class="thumbnail">
<img src="{{path}}" alt="imagefail" style="width:100%">
<div>
<h3 style="">{{title}}</h3>
<button class="copyButton btn btn-primary btn-block"><i class="fa fa-clipboard" aria-hidden="true"></i>&#160Copy</button>
<button class="deleteButton btn btn-danger btn-block"><i class="fa fa-trash-o" aria-hidden="true"></i>&#160Delete</button>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
</section>
I tried using a div.row instead of unordered list and for every image a div.col-md-3 and it has the same result:
<div class="row">
{{#each pictures}}
<div class="list-group-item col-md-3 col-xs-6 col-sm-6">
....
</div>
{{/each}}
</div>
Do you know any solution that does not require using a row for every 4 columns?

Answer 1

Fix the height of the images and it will work fine.
<div class="row">
{{#each pictures}}
<div class="col-md-3 col-xs-6 col-sm-6">
<img src="{{path}}" alt="imagefail" style="width:100%; height:200px">
</div>
{{/each}}
</div>