Tips and Tricks for displaying multiple pictures next to each other - css

Question

I would like to display dummy images in a row next to each other as shown in this:
As I am not so good with CSS I was wondering how to do this in a proper manner? The pictures I have are all statically served, none of this has to be dynamic, or sliding, or anything, just displaying and scaling up responsively
Thank you for your input
Tried around with position absolute and relative, but was weirdly positioned all over the place. I'm using Bootstrap 4 in this project

Answer 1

You can try this:
body {
background: #20262E;
}
div {
margin: 10px;
padding: 10px;
background: #ffffff;
}
img {
width: 24%;
border-radius: 50%;
}
<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>
And if you want the green tick with image follow this:
body {
background: #20262E;
}
#image-gallery {
margin: 10px;
padding: 10px;
background: #ffffff;
}
.image-box{
display: inline-block;
position: relative;
width: 24%;
}
img {
width: 100%;
border-radius: 50%;
}
.green-tick {
position: absolute;
bottom: 10%;
right: 10%;
border-radius: 50%;
color: #ffffff;
background: #00ff00;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />
<div id="image-gallery">
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
<i class="fa fa-check green-tick"></i>
</div>
</div>