Issue In Aligning Images With Bootstrap4 - image

Question

I am trying to align images with Bootstrap 4. I've used .row within a .container. I now have whitespace between images and I don't want it to be that way. I want the images aligned immediately next to each other without any spaces. Any suggestions would be appreciated.
<div class="container mycontainer">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6" id="one"> <!-- FIRST ROW LEFT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-1.jpg" alt="" class="img-responsive" id="photo-1">
</div>
<div class="col-sm-12 col-md-6 col-lg-6" id="two"> <!-- FIRST ROW RIGHT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-4.jpg" alt="" class="img-responsive" id="photo-4">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6" id="three"> <!-- SECOND ROW LEFT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-2.jpg" alt="" class="img-responsive" id="photo-2">
</div>
<div class="col-sm-12 col-md-6 col-lg-6" id="four"> <!-- SECOND ROW RIGHT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-5.jpg" alt="" class="img-responsive" id="photo-5">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6" id="five"> <!-- THIRD ROW LEFT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-3.jpg" alt="" class="img-responsive" id="photo-3">
</div>
<div class="col-sm-12 col-md-6 col-lg-6" id="six"> <!-- THIRD ROW RIGHT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-6.jpg" alt="" class="img-responsive" id="photo-6">
</div>
</div>
</div>
The output I get currently is:

Answer 1

In order to achieve your targeted goal you have to remove Bootstrap's paddings for each div and set the images width to 100% of those:
// you could also use img as a selector
.img-responsive {
width: 100%;
}
// this is the selector of your div's
.col-sm-12 {
padding: 0;
}
However, due to your current implementation this would result in the following (for a running fiddle click here):
If you additionally want to remove the whitespaces shown in the image, you could use Bootstrap's card columns like this:
<div class="card-columns">
<div class="card" id="one"> <!-- FIRST ROW LEFT SIDE-->
<img src="https://via.placeholder.com/350x200" alt="" class="img-responsive" id="photo-1">
</div>
<div class="card" id="two"> <!-- FIRST ROW RIGHT SIDE-->
<img src="https://via.placeholder.com/350x150" alt="" class="img-responsive" id="photo-4">
</div>
<div class="card" id="three"> <!-- SECOND ROW LEFT SIDE-->
<img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-2">
</div>
<div class="card" id="four"> <!-- SECOND ROW RIGHT SIDE-->
<img src="https://via.placeholder.com/350x450" alt="" class="img-responsive" id="photo-5">
</div>
<div class="card" id="five"> <!-- THIRD ROW LEFT SIDE-->
<img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-3">
</div>
<div class="card" id="six"> <!-- THIRD ROW RIGHT SIDE-->
<img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-6">
</div>
</div>
and adjust it with some css to your need:
// the default column count is 1 and there should not be a space between the columns
.card-columns {
column-count: 1;
column-gap: 0;
}
// for medium devices and larger set the count to two
#media (min-width: 768px) {
.card-columns {
column-count: 2;
}
}
// reset card's margin bottom
.card {
margin: 0 !important;
}
// scale images properly to fit the divs
img {
width: 100%;
max-width: 100%;
}
The result looks like this:
You can find the running fiddle here.
If you are using Bootstrap 3, have a look at this Medium article.
Good luck!