bootstrap 3.0 responsive 5 images in one row

css, html, twitter-bootstrap-3

Solution

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>

Problem

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

Original source