Bootstrap centering odd thumbnail - twitter-bootstrap-3

Question

I'm trying to center some generated thumbnail in a row. The problem is that I don't know the number of thumbnail I will get so... I need a flexible solution... I tried with the center-block class, but this isn't working.
Here is a snippet available to show an exemple of my problem (try to center the 4th thumbnail under the first row) :
http://www.bootply.com/663prFgvlL
And my HTML below :
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-5/">
<img class="img-portfolio img-responsive" title="MDL 5" src="/media/photologue/photos/cache/MDL_6_thumbnail.jpg" alt="portfolio MDL 5">
</a>
<div class="mask">
<h4>MDL 5</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:53</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-4/">
<img class="img-portfolio img-responsive" title="MDL 4" src="/media/photologue/photos/cache/MDL_5_thumbnail.jpg" alt="portfolio MDL 4">
</a>
<div class="mask">
<h4>MDL 4</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:52</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-3/">
<img class="img-portfolio img-responsive" title="MDL 3" src="/media/photologue/photos/cache/MDL_4_thumbnail.jpg" alt="portfolio MDL 3">
</a>
<div class="mask">
<h4>MDL 3</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:51</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-2/">
<img class="img-portfolio img-responsive" title="MDL 2" src="/media/photologue/photos/cache/MDL_3_thumbnail.jpg" alt="portfolio MDL 2">
</a>
<div class="mask">
<h4>MDL 2</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:51</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-1/">
<img class="img-portfolio img-responsive" title="MDL 1" src="/media/photologue/photos/cache/MDL_1_thumbnail.jpg" alt="portfolio MDL 1">
</a>
<div class="mask">
<h4>MDL 1</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:50</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/plan-mdl/">
<img class="img-portfolio img-responsive" title="Plan MDL" src="/media/photologue/photos/cache/Plan_amenagement_couleurs_thumbnail.jpg" alt="portfolio Plan MDL">
</a>
<div class="mask">
<h4>Plan MDL</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:50</small></p>
</div>
</div>
</div>
I'm looking to center only the last thumb on the grid... I think this is pretty simple, but... I'm stuck... !
Thanks in advance for your help !

Answer 1

Ok, I should try to search a little bit more before asking.... !
Got my answer here :
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
Only have to :
<div class="container">
<div class="row row-centered">
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
</div>
</div>
And CSS :
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}