How To Make Bootstrap Image Grid Responsive

Question

I am trying to create an image grid. It looks decent on my screen,but I cant make it responsive.When it goes beyond 1000px width it starts to stretch in one row.

I am trying to push vertical each img div when the device width is getting smaller.

Can anyone help me with what I have to start to make my image grid responsive. Already tryed to make display table-cell and float left but didnt work. Here is my code:

HTML

<div class="container">
  <div class="d-flex">

    <div class="img-wrapper-20">
      <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
      <p class="galp">Some Text</p>
    </div>

    <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>

    <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>

    <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>

        <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>
  </div>
</div>

CSS

.container {
  padding: 5rem 0rem;
}

.img-wrapper-20 {
  width: 20%;
  margin: 0rem 1.5rem 0rem 0rem;
}

.img-wrapper-20 img:hover {
  transform: scale(1.08);
}

.galp {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: black;
}

@media screen and (max-width: 1000px) {

}

Answer 1

I recommend looking at CSS Tricks for any help with FlexBox! It gives a complete guide on how to use FlexBox.

Answer 2

Instead of using d-flex class use row row-cols-1 row-cols-sm-2 row-cols-md-4 or you can refer this https://getbootstrap.com/docs/4.5/layout/grid/#row-columns Also to make things easy you can use card grid https://getbootstrap.com/docs/4.5/components/card/#grid-cards it will automatically handle the responsiveness of the layout and you can make tweaks accordingly.

Answer 3

try something like this

I added media query, used flexbox and changed the max width and height of images

HTML

`

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>
    </div>
</div>`

CSS:

.container {
    padding: 5rem 0rem;
}

.img-wrapper-20 {
    max-width: 20%;
    margin: 0rem 1.5rem 0rem 0rem;
}
.img-wrapper-20 img:hover {
        transform: scale(1.08);
    }

.galp {
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: black;
}

.img-dimension {
    max-width:100%;
}

@media screen and (max-width: 1000px) {
    .d-flex {
        display:flex;
        flex-direction: column;
        overflow: auto;
    }
    .img-wrapper-20 {
        max-width: 80%;
        margin: 0rem 1.5rem 0rem 0rem;
    }
}

@media screen and (min-width: 1000px) {
    .d-flex {
        display: flex;
        flex-direction: row;
        overflow: auto;
    }

}