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 r

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>

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