Bootstrap 3: How to pad columns in a row when the number of columns is unknown?

Here is my jsFiddle for full code example.

I couldn't figure out how to upload my placeholder.png image. Nevertheless, notice that there are (supposed to be) 6 images under the subheading?

When I run this locally (where my browser can actually resolve placeholder.png) the images are all smushed together. I can force them to be separated by hackishly adding  's but that seems like the wrong way to accomplish padding:

<div class="row">
    <div class="col-md-2 text-center">
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
    </div>
</div>

Any ideas how I can get these to be padded such that all 6 images are centered and yet still take up most of the page width?

Also, just to throw a curve ball into the equation, when this runs in production, the server decides how many images to send back. It won't always be 6 images: it will always be between 3 and 7 images (so: 3, 4, 5, 6 ot 7 images). I need this to be smart enough to center the images and make them take up most of the page width regardless of how many images are returned by the server. Any ideas?

In order to take up the full screen, you'll need each image to take up it's share of the available screen width. I can't really see a way of doing this without jQuery. The good news is, it's rather trivially implemented.

Just find the number of images. Take the total percent width available and divide by that number. Then apply that as a width to each image:

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

var $images = $(".centerImages > img");
var numberImages = $images.length;
var width = 90/numberImages;
$images.css('width', width+'%');

<!-- language: lang-css -->

.centerImages {
  text-align: center;
}

<!-- language: lang-html -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="centerImages">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
</div>

<!-- end snippet -->