Stacking Blocks with Bootstrap

Question

Stacking Blocks with Bootstrap

Navigation

#1 by (2 votes)

2

I'm doing a layout using bootstrap and I came across a problem at the time of stacking blocks to be responsive.

I have 5 blocks of different heights, divided into 3 columns:

When you reach a certain width, the blocks are stacked, but the height of each "layer" is defined by its largest block:

Would anyone have a solution for this?

html css bootstrap-3

asked by anonymous 15.08.2016 / 22:56

1 answer

Apply the SyntheticaBlackEyeLookAndFeel in the application Calculate duplicate input value

score 2 · Answer 1

Yes, there is a solution, however to get the desired effect, you will have to use a plugin called masonry.

Of one studied, it is very practical.

link

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

It would be more or less like that, the grid item would be your li. This plugin makes according to the resolution of your screen it adapts and leaves responsive automatically.