user13286 user13286 -4 years ago 153
CSS Question

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:

<div id="container">

<div class="row">

<!-- Full Size Image -->
<div class="col-sm-12">
<img src="http://placehold.it/960x300" />
</div>

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

</div>

</div>


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

Bootply


Answer Source
.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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download