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

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.

 ... 

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.