Bootstrap grid images positioning - html

Question

I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser

Answer 1

Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>

Answer 2

I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.

Answer 3

Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.