how can i create this kind of layout with bootstrap 5?

You can rethink the structure with 2 col side by side where one olds also two columns with the smaller img.:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

<!--left col also styled as a row -->
  <div class="col-6 row">
  
  <!-- first row of that col -->
    <img src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
    
  <!-- second row of that col with 2 col-6 -->
  <div class="col-6 mt-auto">
      <img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
    </div>
    
    <div class="col-6 mt-auto">
      <img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
    </div>
  </div>
  
  <!-- right column -->
  <div class="col-6">
    <img src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
  </div>
  
</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top