Bootstrap Image Grid [duplicate] - html

Question

This question already has answers here:
Bootstrap 4 masonry layout utilizing flexbox grid
(3 answers)
Closed 4 years ago.
I want to create a responsive image grid as in the picture below:
How do I use bootstrap columns and rows to achieve this?
<div class="row">
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
........
...........
.................
.....................
</div>
I place all the columns inside a single row so that the column elements wrap themselves but this does not happen.
When I implement the code above, due to "height: auto" some images are long and this creates void white space between images of different rows.
I get something like this as a result:

Answer 1

You can achieve this with card columns. JSFiddle here:
<div class="container-fluid pt-3">
<div class="card-columns">
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
</div>
</div>

Answer 2

depending on you requirement, you need to replace col-3 with col-sm-3 or col-md-3, etc:
img
{
width: 100%;
margin: 10px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-3">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
<img src="https://www.w3schools.com/w3images/falls2.jpg" alt="Lights" >
<img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
</div>
<div class="col-3">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="Lights" >
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
</div>
<div class="col-3">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" >
<img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
</div>
<div class="col-3">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
<img src="https://www.w3schools.com//w3images/rocks.jpg" alt="Lights" >
</div>
</div>

Answer 3

I don't think that's possible with just bootstrap.
Look for the masonry ( https://masonry.desandro.com/ ) or isotope ( https://isotope.metafizzy.co/ ) plugin for bootstrap.