Twitter Bootstrap 3 same height fluid grid layout?

Question

I need same height to layout box product in my website ! you can see image below

when im using "clearfix" for break like it work fine , so when display in small sreen (mobile device) this same like image below , i think problem for height of the box !

because i load product in mysql data below code

 <div class="row">
 <?php foreach($contens as $content){?>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
   <div class="contents-block">
    <div class="image"><img href="<?php echo $content['image'];?>" />
    </div>
        ................ some code .............
   </div>
  </div>
<?php } ?>

i need all box is same height to display like in my design ! any idea for this !

Answer 1

If you don't want to truncate the content, there are 2 possible ways to deal with it.

1. use <div class="clearfix visible-xs"></div>

suggested here: https://github.com/twbs/bootstrap/issues/9454

It's easy to understand, but generates empty clearfix divs, which I personally consider it's polluting the markup. Plus if you're looping the collection dynamically things could get worse, you may end up using code like this:

<% @posts.each do |post| %>
  <div class="col-sm-6 col-md-4">
    <%= post.body %>
  </div>

  <% unless index == 0 %>
    <% # add a visible clearfix every 3 posts in medium ~ large screen, respond to col-md-4 %>
    <% if index % 2 == 0 %>
      <div class="clearfix visible-md visible-lg"></div>
    <% # add a visible clearfix every 2 posts in small screen, respond to col-sm-6 %>
    <% elsif index % 1 == 0 %>
      <div class="clearfix visible-sm"></div>
    <% end %>
  <% end %>
<% end %>

2. use css nth-child selector

First suggested in this issue: https://github.com/twbs/bootstrap/issues/9454

It's reusable, keep the code clean, but have to add extra stuff to make it work. Also have to remember the one tiny syntax for it: <div class="row multi-columns-row">

https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing

I encountered the same issue, for me I probably will go the 2nd solution.

Answer 2

IMHO one of these libs would be a better solution:

http://isotope.metafizzy.co/ http://masonry.desandro.com/