Bootstrap Make Divs Float Next to Each Other in Columns

Question

I'm trying to reproduce divs floating up next to each other similar to the Masonry jQuery plugin, but with native Bootstrap/CSS if it's possible.

When I tried the following code I get an output like seen below, the column on the right seems to work fine, but the other two don't. I've not added any extra code to the last column, how can I make the others float up the page to remove the space?

HTML Code, generated from PHP:

$output .= "<div class='container-fluid'>";
$output .= "<div class='row' class='article-index-areas'>";

while ($stmt -> fetch()) // Prints out the white boxes 
{           
  $output .= "
    <div class='col-sm-6 col-md-4'>
      <div class='thumbnail' style='height:" . rand(100,300) . "px;'>

      </div>
    </div>
  ";
}

$output .= "</div>";
$output .= "</div>";

Possible duplicate of http://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only — Robert, Jul 04 '16 at 14:38

score 0 · Answer 1 · answered Jul 04 '16 at 14:28

I met same requirement in my project,You need to give position:absolute and set the top,left,width,height of each and every elements.

For example,if you have dynamical project,first measure the each element assign to next element top,left with position absolute.

Check in pinterest: https://in.pinterest.com/

In pinterest,check inspect the each item of css properties,its really interesting.

score 0 · Answer 2 · answered Jul 04 '16 at 14:53

After playing around with it for a bit I found a native way by buffering the output into columns:

$output = array('', '', ''); // Store in 3 columns
$count = 0;

while ($stmt -> fetch())
{           
  $output[$count] .= "
    <div class='thumbnail' style='height:" . rand(100,300) . "px;'>

    </div>
  ";

  $count++;

  if($count == 3)
    $count = 0;
}

$real_output = '';
$real_output .= "<div class='row'>"; // Add 1 row for them all

foreach ($output as $o)
{
  $real_output .= "<div class='col-sm-6 col-md-4'>"; // Add 3 columns
  $real_output .= $o; // Put the data from the array into each column
  $real_output .= "</div>";
}

$real_output .= "</div>";

It works as intended but when you resize it orders them by columns, I guess that could be fixed by changing how you store them in the array though, hope it helps.

Bootstrap Make Divs Float Next to Each Other in Columns

2 Answers2