Bootstrap clearfix every 3 columns

Answer 1

Your columns are most likely of varying heights which is a common issue with grids like Bootstrap with regard to floats & clear. Bootstrap does have a utility to work with but it's not always a great choice. See Resets.

An alternative.

Since you have 2 different breakpoints that your columns are set at, col-lg-4 and col-sm-6 (col-md-6 isn't needed since it's equal to your small class of col-sm-6), you have to clear the columns at the appropriate breakpoints.

Make sure to be specific when implementing this so it does not affect any other part of the grid you may be using elsewhere. Add a generic class to each column or use something like the example below, etc.

One way to do this is to place the needed rules inside of media queries in conjunction with Pseudo Classes for the columns. Also see MDN nth-child.

Working Example:

@media (min-width: 1200px) {
  .grid .col-lg-4:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .grid .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row grid">

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x350" alt="" />
      </a>
      <h5>ONE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/550x550" alt="" />
      </a>
      <h5>TWO</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x450" alt="" />
      </a>
      <h5>THREE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/250x500" alt="" />
      </a>
      <h5>FOUR</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x150" alt="" />
      </a>
      <h5>FIVE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>

  </div>
</div>

Answer 2

I think the more appropriate way would be to go inside the css file and changing the width according to screen width

Answer 3

<div class="col-lg-4 col-md-6">

It should be working, maybe your img is too large, try this :

<img class="img-responsive" src="{{ asset('img/logo.png') }}" alt=""/>

Answer 4

If it were me, I would use a count for the row.

<?php $count = 1;
foreach( $products as $p ) 
{
    if ($count%3 == 1)
    {  
         echo "<div class='row'>";
    }?>
     <div class="col-lg-4 col-md-6 col-sm-6">
        <a class="thumbnail" href="#?">
            <img src="{{ asset('img/logo.png') }}" alt=""/>
        </a>
        <h5>{{ $p->name }}</h5>
        <p>{{ $p->details }}</p>
    </div>
    <?php if ($count%3 == 0)
    {
        echo "</div>";
    }
    $count++;
}
if ($count%3 != 1) echo "</div>";?>

Answer 5

I acually had a similar problem and wrote some jQuery for it, works perfectly for me!

With the following html:

<div id="products">
    @foreach($products as $p)
        <div class="col-lg-4 col-md-6 col-sm-6">
            <a class="thumbnail" href="#?">
                <img src="{{ asset('img/logo.png') }}" alt=""/>
            </a>
            <h5>{{ $p->name }}</h5>
            <p>{{ $p->details }}</p>
        </div>
    @endforeach
</div>

And jQuery:

$(document).ready(function() {
    $(window).resize(function() {
        var width = window.outerWidth;
        var items = $('div#products > div');

        if(width <= 767) {
            console.log('extra small loop (mobile)');
            $('div#products .row').contents().unwrap();
        } else if (width >= 768 && width <= 991 ){
            console.log('small loop (tablet)');
            $('div#products .row').contents().unwrap();
            for (var i = 0; i < items.length; i += 2) {
                var div = $("<div/>", {
                    class: 'row'
                });
                items.slice(i, i + 2).wrapAll(div);
            }
        } else { // greater than 991 
            console.log('medium loop (desktop)');
            $('div#products .row').contents().unwrap();
            for (var i = 0; i < items.length; i += 3) {
                var div = $("<div/>", {
                    class: 'row'
                });
                items.slice(i, i + 3).wrapAll(div);
            }
        }
    }).resize();
});

It grabs 3 columns on desktop size and puts them in a row, when changed to tablet size it wil break up those rows and grab 2 columns and put those in a row. And finally for mobile it will break the rows again and show all items stacked.

Hope this helps!