Bootstrap 3 Responsive Panel Layout with Varying Heights
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 shows an example of what we have so far:
And the django/bootstrap code that generates the layout (
The problem is caused here by the varying heights of panels #5, #6 and #8, which means we don’t get a complete row laid out below them. Ideally, we would want the layout to do something like this:
We are looking for a CSS based solution if possible, which will maintain the responsive behavior of laying the panels out with varying number of columns based on screen width. There are a couple of solutions we have considered, but neither of them are particularly good:
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.