bootstrap 4 - arrange images in particular? - html

Question

I created a simple page in my Laravel and in that page, I have three sections which is mainly navigation, content and footer. I got the navigation and footer layout completed. In the content section, I wish to use bootstrap to place my images layout like this:
Image:
This is just a general idea but I need it to be responsive so it fits the mobile layout as well.
What I have tried is to use Masonry for CSS but it does not fit the mobile layout responsively. I tried using bootstrap 4 but the alignment between IMG3 and IMG4/5 are too far apart and placing margin does not align them near enough.
My code:
#section('content')
<div class="container">
<div class="row">
<div class="col-sm">
<img src="{{asset('/images/Home_Bed.jpg')}}" class="img-fluid custom-position-1" alt="">
</div>
<div class="col-sm col-8">
<img src="//via.placeholder.com/350x150" class="img-fluid custom-position-2" alt="">
</div>
<div class="col-sm custom-position-3">
<img src="{{asset('/images/Home_Kitchen.jpg')}}" class="img-fluid custom-position-3" alt="">
</div>
</div>
<div class="row align-items-end">
<div class="col col-8">
<img src="{{asset('/images/Shop_Page.jpg')}}" class=" img-fluid custom-position-4" alt="">
</div>
<div class="col">
<img src="{{asset('/images/Home_Sofa.jpg')}}" class="img-fluid custom-position-5" alt="">
</div>
</div>
</div>
#endsection
.row {
margin-bottom: 30px;
}
.custom-position-1{
position: relative;
bottom: -160px;
left: 50px;
height:100px;
object-fit: cover;
}
.custom-position-2{
position:relative;
right:100px;
object-fit:cover;
}
.custom-position-3{
position: relative;
bottom: -160px;
left: 50px;
height:100px;
object-fit: cover;
}
.custom-position-4{
position: relative;
height: 400px;
width:800px;
object-fit: cover;
}
.custom-position-5{
position: relative;
height:300px;
left:50px;
top: 100px;
object-fit: cover;
}
Does anyone have any idea how to make it good?

Answer 1

Are you looking for a solution like this?
If you want to have some spacing use margin classes.
img {
width: 100%;
height: 100%;
}
[class*="col-"],
.flex-grow-0 {
border: 1px solid black;
}
.img-fluid {
padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row m-0">
<div class="col-8 p-0">
<div class="row m-0">
<div class="col-6 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
<div class="col-6 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
<div class="col-12 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
</div>
</div>
<div class="col-4 p-0 d-flex">
<div class="d-flex flex-column">
<div class="flex-grow-0 mt-auto">
<img src="http://placehold.it/300x500" class="img-fluid" alt="" />
</div>
<div class="flex-grow-0">
<img src="http://placehold.it/400x400" class="img-fluid" alt="" />
</div>
</div>
</div>
</div>
</div>