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;
}

<divclass="row text-center"><!-- Slider Thumbnails --><divclass="col-sm-3"><imgsrc="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..

<divclass="container-fluid"><divclass="row"><divclass="col">1</div><divclass="col">2</div><divclass="col">3</div><divclass="col">4</div><divclass="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...

<divclass="container-fluid"><divclass="row justify-content-center"><divclass="col-sm-2"></div><divclass="col-sm-2"></div><divclass="col-sm-2"></div><divclass="col-sm-2"></div><divclass="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