Aligning images together - twitter-bootstrap-3

Question

In the following code I inserted 5 images but I cannot put all of them in a single row and eliminate the spacing between them.
<section class="images">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="images1.jpg" alt="images1" max-width="400px" max-height="95px" width="auto" height="auto">
</div>
<div class="col-lg-3">
<img class="img-responsive" src="images2.jpg" alt="images2" max-width="230px" max-height="95px" width="auto" height="auto">
</div>
<div class="col-lg-3">
<img class="img-responsive" src="images3.jpg" alt="images3" max-width="230px" max-height="95px" width="auto" height="auto">
</div>
<div class="col-lg-3">
<img class="img-responsive" src="images4.jpg" alt="images4" max-width="230px" max-height="95px" width="auto" height="auto">
</div>
<div class="col-lg-3">
<img class="img-responsive" src="images5.jpg" alt="images1">
</div>
</div>
</section>
How can I put the 5 images together and eliminate the space between the images?

Answer 1

Bootstrap column divs come with padding. Eliminate them:
.row div {padding:0;}

Answer 2

Let's divide the row into one wide image and four narrow images.
1 x 400px + 4 x 230px = 1320px
400px / 1320px = 10 / 33
230px / 1320px = 23 / 132
Oops, such parts are not suitable for the layout based on 12 columns. Because each of the columns has to
1320px / 12 = 110px
I suggest a little change the width of images:
440px = 4 x 110px
220px = 2 x 110px
The image 440 pixels wide will take 4 of 12 columns. The image 220 pixels wide will take 2 of 12 columns.
Remove the clearance between the columns:
.images {
padding: 0 15px;
}
.images .col-lg-2,
.images .col-lg-4 {
padding: 0;
}
Bootstrap determines img-responsive like so:
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Therefore, we write
width="100%"
instead of
max-width="...px" max-height="95px" width="auto" height="auto"
Check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.images {
padding: 0 15px;
}
.images .col-lg-2,
.images .col-lg-4 {
padding: 0;
}
<section class="images">
<div class="row">
<div class="col-lg-4">
<img class="img-responsive" src="http://placehold.it/440x95" alt="images1" width="100%">
</div>
<div class="col-lg-2">
<img class="img-responsive" src="http://placehold.it/220x95/ddd" alt="images2" width="100%">
</div>
<div class="col-lg-2">
<img class="img-responsive" src="http://placehold.it/220x95" alt="images3" width="100%">
</div>
<div class="col-lg-2">
<img class="img-responsive" src="http://placehold.it/220x95/ddd" alt="images4" width="100%">
</div>
<div class="col-lg-2">
<img class="img-responsive" src="http://placehold.it/220x95" alt="images5" width="100%">
</div>
</div>
</section>

Answer 3

You can also simplify things!
Put everything in a col-lg-12, then add your images as elements of an inline-list. If you dont need columns for each image, an inline list should work just fine.
You then only have to adjust the margin/padding of your li img elements to determine how much space you want between them.
Much simpler, no?

Answer 4

Ideally, a full width is 100%.Therefore,if you need 5 images you simply divide 100 by 5 which will give 20%.
Check the html code:
<footer class="images">
<div class="row">
<div class="col-lg-2">
<img class="img-responsive" id="responsive" src="Dollarphotoclub_79081264-copy.jpg" alt="images1">
</div>
<div class="col-lg-2">
<img class="img-responsive" id="responsive" src="beds.jpg" alt="images1">
</div>
<div class="col-lg-2">
<img class="img-responsive" id="responsive" src="bed-cream.jpg" alt="images1">
</div>
<div class="col-lg-2">
<img class="img-responsive" id="responsive" src="soaps.jpg" alt="images1">
</div>
<div class="col-lg-2">
<img class="img-responsive" id="responsive" src="Dollarphotoclub_79081264-copy.jpg" alt="cake2">
</div>
</div>
</footer>
The css code will be as it follows:
.masterfooter .col-lg-2 {
width: 20%;
float: left;
}