CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user13286
user13286

Reputation: 3075

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

Upvotes: 18

Views: 26886

Answers (3)

isherwood
isherwood

Reputation: 61083

This answer is obsolete in favor of native flexbox solutions. Floats are not a good layout strategy anymore.

.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

Upvotes: 36

Carol Skelly
Carol Skelly

Reputation: 362620

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>

Upvotes: 16

master_dodo
master_dodo

Reputation: 1337

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

Upvotes: 3

Related Questions