Bootstrap images in columns overlapping - html

Question

I have been trying to get 3 images to be responsive using bootstrap columns. They seem to be responsive, but the problem is that the images overlap except for the last column which remains being normal.
<div class="row">
<div class="col-sm-2 offset-sm-3">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
<div class="col-sm-2">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
<div class="col-sm-2">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
</div>
I would like all 3 columns to like the one all the way on the right.
I've tried adding class "img-responsive" & "img-fluid" and neither have worked.
I'm using bootstrap 4.0.

Answer 1

The images are overflowing their container. The image on the right is full height but it is overflowing its container. Using the bootstrap '.col-2' means that you are limiting the column widths based on the window width. You could use background css rules instead of img elements to ensure containment or coverage of images or you could just use .col-auto instead of .col-2 with .justify-content-center provided you have appropriately sized images.
All three examples are in the snippet.
.row {
min-height: 150px;
}
.col-auto {
background-color: green;
}
.col-sm-2 {
background-color: red;
}
.bg-image {
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/100");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.bg-image.bg-image--cover {
background-size: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="col-auto">
<img class="img-fluid" src="https://picsum.photos/100">
</div>
<div class="col-auto">
<img class="img-fluid" src="https://picsum.photos/100">
</div>
<div class="col-auto">
<img class="img-fluid" src="https://picsum.photos/100">
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-3">
<div class="bg-image"></div>
</div>
<div class="col-sm-2">
<div class="bg-image"></div>
</div>
<div class="col-sm-2">
<div class="bg-image"></div>
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-3">
<div class="bg-image bg-image--cover"></div>
</div>
<div class="col-sm-2">
<div class="bg-image bg-image--cover"></div>
</div>
<div class="col-sm-2">
<div class="bg-image bg-image--cover"></div>
</div>
</div>