CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
Joe Sgg
Joe Sgg

Reputation: 81

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

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

Upvotes: 4

Views: 7384

Answers (3)

Mike Hague
Mike Hague

Reputation: 243

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

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

Upvotes: 7

gianni
gianni

Reputation: 1357

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

Upvotes: 2

user7601770
user7601770

Reputation:

Just tried this code in my browser and it seems fine. The divs aren't overlapping for me and are being displayed as a normal block element. If you want the images to readjust with the browser window try messing with the width and height settings. Setting them as percentages of the browser window. For the image divs, width: 15%, and give a 5% padding on the left and right sides of the row.

The images may be too large for them all to be displayed on the same line. Try resizing them in an editor.

Upvotes: 0

Related Questions