Bootstrap 3 Responsive Panel Layout with Varying Heights

Question

We are trying to use the bootstrap 3 panels to create a responsive grid layout, however we are unable to work out how to get them to display in the way that we want them. Below

Answer 1

Another approach would be to use CSS3 column-width..

http://www.bootply.com/123350

And, here is a working example using Bootstrap with the Masonry plugin...

http://www.bootply.com/123353

Answer 2

Here's my take on it:

You can fix every panel's height and then add a scroll bar to them. A scroll bar will automatically appear in those panels in which the content doesn't fit in their height.

CSS

.mypanel {
    height: 100px;
    overflow-y: scroll;
}

HTML

Add the .mypanel class to your panel's body.

<div class="panel-body mypanel"> ... </div>

UPDATE

Using overflow-y: scroll; will always display a scroll bar even if the content fits completely in the panels. So, if you want to add a scroll bar to only those panels whose content doesn't fit in them, use overflow-y: auto; instead.