Bootstrap clearfix issue

issue with clearfix using a responsive multicolumn layout

[topr8]

Bootstrap 3.3.4

images are encased in a column div and all the div's are encased in a single row, although the column numbers add up to much more than 12, this seems allowable, as the docs state that if the columns add up to more than 12 then it just flows into another row on the page (even though i only have a single <div class="row"> )

this works perfectly when all the images are exactly the same size, however if they are slightly different then it doesn't, just as you would expect.
so i've added <div class="clearfix"> appropriately.

now what happens is that when 3 images should be displayed across, it works great but with 4 images it doesn't.

the code is:

<div class="container">

  <div class="row">

    <div class="col-xs-4 col-sm-3 col-md-4 col-lg-3">
      <div class="thumbnail text-center">
        <picture>
         <source media="(min-width: 616px)" srcset="/img1.jpg">
         <source media="(min-width: 415px)" srcset="/img2.jpg">
         <source srcset="/img3y.jpg">
         <img src="/img1.jpg" alt="my image" class="img-responsive text-center">
       </picture>
       <div class="caption text-center">
        <h3>Picture Title</h3>
       </div>
      </div>
    </div>

... the column is repeated many times, after each 3 columns:
<div class="clearfix visible-xs visible-md">
... and after each 4 columns:
<div class="clearfix visible-sm visible-lg">


  </div> <!-- end row -->
</div> <!-- end container -->

[eMTH]

I think you are not using the grid system as it should be used. If I got this wrong, please ignore this reply.

You should wrap your 3 images inside 3 different DIV's with classes "col-xs-* col-sm-* col-md-* col-lg-*", where * should be replaced with the number you need according to the desired widths.

The grid works like this... For mobile devices with a maximum width of 768px the DIV uses COL-XS-* settings. For devices with a equal or larger width than 768px the DIV uses COL-SM-* settings. For devices with a equal or larger width than 992px the DIV uses COL-MD-* settings. And for devices with a equal or larger width than 1170px the DIV uses COL-LG-* settings.

Now, because you have 3 elements that you want to display in a row, in order not to have one element jumping on the next row, you must pay attention when you set their classes. In your snippet you have placed all the images inside one DIV (not 3) with the classes "col-xs-4 col-sm-3 col-md-4 col-lg-3", but you also set minimum widths to 2 of the images.

For example (3 images): for mobile devices with a maximum width of 768px the 3 (for every element/DIV that contains the IMG tag) COL-XS-* summed must be maximum 12 (COL-XS-3 for first DIV, COL-XS-5 for the second DIV, COL-XS-4 for the third DIV, 3+5+4=12). Following this example you also add the other classes (COL-SM-*, COL-MD-*, COL-LG-*) for every element. Every extra element added to this ROW will jump to the next line.

You should also replace the images max-width with a 100% width (that fits col-*-*).

Good luck!

[topr8]

thank you for your detailed reply ... however ...i think you misunderstand!

there is only one image shown in the example, i use the <picture> element in order to serve different versions of the image depending on the viewport size. that's why they are all in 1 div - which in bootstrap terms is a column,

i have a great many of these columns, maybe 50, and they wrap onto the next line after every 3 or 4 divs depending on the viewport size ... this works fine.

i've added the clearfix class which works for lg md and sm but for some reason not the xs size