title: How to center Bootstrap columns when they are an odd number?
body: <p>I am creating an image slider using Bootstrap and having an issue that I can't seem to solve in my head.</p>
  
  <p>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.</p>
  
  <p>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 <code>float</code> and use <code>margin:0 auto;</code> to center, but I can't figure out what to do when there are 3 thumbnails.</p>
  
  <p>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?</p>
  
  <p>Here's some sample code for the 3 thumbnail version:</p>
  
  <pre><code>&lt;div id="container"&gt;
  
    &lt;div class="row"&gt;
  
      &lt;!-- Full Size Image --&gt;
      &lt;div class="col-sm-12"&gt;
        &lt;img src="http://placehold.it/960x300" /&gt;
      &lt;/div&gt;
  
      &lt;!-- Slider Thumbnails --&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;img src="http://placehold.it/200x150" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;img src="http://placehold.it/200x150" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;img src="http://placehold.it/200x150" /&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And I've set up a Bootply that shows how I solved for the 1 thumbnail and 2 thumbnail versions:</p>
  
  <h1><a href="http://www.bootply.com/HCL4f7rBkY">Bootply</a></h1>