html - Bootstrap- how to align 5 images in different alignment?

Question

I created a layout for the view and I want to arrange my image in this way below: [![enter image description here][1]][1]

I created my alignment and plan to use a row with two columns but so far my top left two pictures and the one below is are space out far apart and I can't get it to look like the image. The two right picture are also space out apart.

Below is my code:

<section class="learn_more">
    <div class="row">  
            <div class="col-lg-4 col-md-4 col-sm-7 col-xs-7 d-flex ">
                <div class="container">
                <img src="{{asset('/images/Home_Bed.jpg')}}" alt="" style="margin-top:100px; margin-left:20px;" />

                <div class="text-block">
                    <h4>Nature</h4>
                    <p>What a beautiful sunrise</p>
                </div>       
                </div>

            </div>

            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
                <img src="{{asset('/images/Home_Pillow.jpg')}}" alt="" style="margin-top:100px; height:55%" />
            </div>
            <div class="col-lg-5 col-md-3 col-sm-5 col-xs-5" >
                <img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="" style="margin-top:120px; margin-left:50px;" /> 

    </div>



            <div class="col-lg-7 col-md-7 col-sm-5 col-xs-5">
                <img src="{{asset('/images/Shop_Page.jpg')}}" alt="No Logo" style="margin-left:40px; margin-bottom:100px;" />
        </div>




            <div class="col-lg-5 col-md-3 col-sm-5 col-xs-5" >
            <img src="{{asset('/images/Home_Sofa.jpg')}}" alt="" style="width:100%; margin-left:150px;" /> 

             </div>


    </div

Is there a mistake I made? >

Answer 1

You could do something like this also I also recommend using masonry.

<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
    <div class="col-sm">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
    <div class="col-sm custom-position">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
  </div>

 <div class="row align-items-end">
    <div class="col col-8">
      <img src="//via.placeholder.com/700x300" alt="">
    </div>    
    <div class="col">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
  </div>
</div>

And the CSS:

.row {
  margin-bottom: 30px;
}

*[class*="col"] {
  height: 250px;
  overflow: hidden;
  display: block; 
}

.col-8 {
  height: 350px;
}

*[class*="col"] img {
  width: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
}

.custom-position {
 position: relative;
 bottom: -100px;
}

Note that if you go with this option you should fit images with object-fit so you could use different sizes.