1

I want to create a responsive image grid as in the picture below: enter image description here

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:
enter image description here

Arun
  • 1,933
  • 2
  • 28
  • 46
jannela vignendra
  • 21
  • 1
  • 4

3 Answers3

1

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>
Hooman Bahreini
  • 14,480
  • 11
  • 70
  • 137
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>
John Bell
  • 2,350
  • 1
  • 14
  • 23
0

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.

mlite
  • 1
  • 3