How to center Bootstrap columns when they are an odd number?

How to center Bootstrap columns when they are an odd number?

I am creating an image slider using Bootstrap and having an issue that I can’t seem to solve in my head.
Under each instance of this slider, I will have 3-column thumbnails(4 per row). However, some of the sliders will not have 4 thumbnails, some will have 1, 2 or 3. In these instances I would like to center the thumbnails horizontally, while maintaining the same 15px gutter they would have if there were 4 of them.
Now when there are only 2 thumbnail images, this is easy, because I can simply add an empty 3-column div before and after the set of the thumbnails. When there is only 1 thumbnail, I can remove the float and use margin:0 auto; to center, but I can’t figure out what to do when there are 3 thumbnails.
Can anyone tell me what the best way to accomplish this would be? I was thinking it would be nice to be able to set up half columns so I could just put an empty 1.5-column div before and after the thumbnails. Is this feasible?
Here’s some sample code for the 3 thumbnail version:

And I’ve set up a Bootply that shows how I solved for the 1 thumbnail and 2 thumbnail versions:
Bootply

Solutions/Answers:

Solution 1:

.row.text-center > div {
    display: inline-block;
    float: none;
}

<div class="row text-center">
    <!-- Slider Thumbnails -->
    <div class="col-sm-3">
        <img src="http://placehold.it/200x150">
    </div>
    ...
</div>

Demo

Solution 2:

Bootstrap 4: Center Odd Columns

I know the original question was Bootstrap 3.x timeframe, but now that 4.x is available centering odd numbers of columns is easier. Here’s an example of 5 equal, full-width columns (no extra CSS) using the new auto-layout grid..

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

This solution works because Bootstrap 4 is now flexbox, and also works for any number of odd columns across the viewport.

You can also center the “classic grid” columns that have defined width using justify-content-center on the row. For example, 5 col-sm-2 columns…

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
    </div>
</div>
Related:  How to Get total and Current Slide Number of Carousel

Solution 3:

In my case, div has class col-xs-11. So, added following css to make it perfectly in center for small screens. Note: setting float and margin are important.

  padding-left:0;
  padding-right:0;
  float:none;
  margin:auto

References