Bootstrap - how to stop images overlapping on smaller window size?

Question

I have this:

<div id="members">
    <div class="container-fluid">
        <div class="row">
            <div id="members" class="col-md-12 text-center">
                <h3>Text</h3>
                <div class="col-lg-2 col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
         </div>
      </div>
    </div>
</div>

However when I make the browser window narrower, they start to overlap. How can I control this? And how can I remove some of the images on the smaller browser window?

Thanks

Answer 1

Bootstrap 4 uses an .img-fluid class for responsive images, from the docs

<img src="images/1.png" class="img-fluid" />

Answer 2

you need to add img-responsive class to the images, and hidden-xs to the container div (in case you want to hide in mobile). Hidden-sm for tablet, hidden-md for small desktop, and hidden-lg for large desktop:

<div class="col-md-2 hidden-xs">
   <img src="http://via.placeholder.com/350x150/880000" class="img-responsive">
</div>

Pen: https://codepen.io/giannidk/pen/rwpmpx?editors=1100