bootstrap 3.0 responsive 5 images in one row

Question

I am having a problem with bootstrap 3.0 making 5 images in one Row and make those responsive ? The grid system is based of 12 , so how to make 5 images and they look centered without any spaces ?

Also is there away I can make when viewed on tablets or smartphones <480 px to be 2 images per raw? right now it shows 5 images under each other??

here is my code:

<div class="row">
 <div class="col-md-2">
 <img class="img-responsive" src="/images/img1.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
 <img class="img-responsive" src="/images/img3.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
  <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

As you can see I am using col-md-2 Along with img-responsive? but its not working really because its not centered

Answer 1

You could have an empty column on either side:

<div class="row">
 <div class="col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>