Bootstrap- How To Align 5 Images In Different Alignment?

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 colu

Solution 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.