How can bootstrap implement such a set of blocks? A backup option for me is js liba masonry. What solution would you use?

enter image description here

  • Well, if the blocks are of different heights, then it is probably better to use the js-library masonry.desandro.com . But you can most likely without it - entithat

1 answer 1

Perhaps so.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <div class="container mb-2"> <div class="row pt-2"> <div class="col"> <!-- 1 card --> <div class="card mb-2"> <img class="img-fluid" src="https://dummyimage.com/600x500/000/fff.jpg" alt=""> </div> <div class="row"> <div class="col"> <!-- 2 card --> <div class="card"> <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> </div> </div> <div class="col pl-0"> <!-- 3 card --> <div class="card"> <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> </div> </div> </div> </div> <div class="col pl-0"> <div class="row mb-2"> <div class="col"> <!-- 4 card --> <div class="card"> <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> </div> </div> <div class="col pl-0"> <!-- 5 card --> <div class="card"> <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> </div> </div> </div> <!-- 6 card --> <div class="card"> <img class="img-fluid" src="https://dummyimage.com/600x500/000/fff.jpg" alt=""> </div> </div> </div> </div>

  • one
    Thanks, just version 4 and using it in the project - Vasil Bodnaruk