Images in Bootstrap Grid

Question

I'm trying to display images in a container, but i have a problem when resizing the browser window: Before going from 6 to 4 items, it stays at 6 items per row, but now they overlap

Here is what i'm talking about: https://www.bootply.com/render/dKyKQWIL9j

The images have to stay a fixed size (160x230) and there should always be a margin of 7 at top/bottom and some margin inbetween the items in a row (just not a margin on the outer left and right, so the images allign perfectly in the container)

Here is my code:

<div class="container" style="border:1px solid green">
<div class="row">
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <!-- etc... -->
</div>
</div>

(The solid borders are just there for testing)

Any help is greatly appreciated. I'm kind of new to css and html, but i did my best reading the bootstrap documentation of their grid system, but i couldn't find anything in between col-6 col-sm-4 col-md-3 col-lg-2 to fix my problem. Thanks in advance!

Edit:

When resizing the browser window the images should always stay the same resolution and go from 6 items in a row down to 2 items per row (so 6-5-4-3-2), while always filling the screen as soon as the browser size is smaller than the container.

`but i did my best reading the bootstrap documentation of their grid system` you need to read the new doc and not the old one ... you are using classes from Bootstrap 3 while using bootstrap 4 — Temani Afif, Feb 21 '18 at 08:52

score 1 · Answer 1 · answered Feb 21 '18 at 08:48

1

I see you are using bootstrap version 4, So please use col-6 instead of col-xs-6 for mobile. And also for responsive images use img-fluid instead of img-responsive class. Thanks

answered Feb 21 '18 at 08:48

J. Patidar

34
6

Thanks, that fixes the only 1 item at the smallest resolution problem, but do you maybe know a fix for them overlapping before going from 6 to 4 items per row as well? – SupaDupa Feb 21 '18 at 09:03
Yes, if you use img-fluid instead of img-responsive on images and use col-3 for 4 columns and col-2 for 6 columns in small screens. – J. Patidar Feb 21 '18 at 09:07
I updated my code (in OP as well) to `col-6 col-sm-4 col-md-3 col-lg-2` and changed it to img-fluid, but the behavior is still the same :/ – SupaDupa Feb 21 '18 at 09:08
I did't found any overlapping in this code now. can you please show the screenshot for the exact issue. – J. Patidar Feb 21 '18 at 09:35
Nevermind, it dos work. I'm just having another issue now, now that that is fixed. My images have different sizes and i used the width and height attribute to set them to a fix size, but now with img-fluid my width and height settings are overthrown, any idea for a fix? – SupaDupa Feb 21 '18 at 09:47
The problem is fixed width for images. – J. Patidar Feb 21 '18 at 09:52
And what could i do about my problem then? – SupaDupa Feb 21 '18 at 10:46
But you can't use fixed width for smaller screens in a single row. That's why Bootstrap invented the class img-fluid for show the image properly with smaller screen. – J. Patidar Feb 21 '18 at 10:52
Here i'm using `col col-6 col-sm-6 col-md-3` and worked fine. Thank you. – moreirapontocom Nov 15 '18 at 22:35

Images in Bootstrap Grid

1 Answers1