Bootstrap column same height with column spacing

Question

I develop a front-end for a site and run into a serious problem. I use bootstrap 3 to make the site responsive.
I use the grid feature to layout but I need to meet the following requirements:
- The columns must have the same height
- There should have space between columns

The first problem is sold via SO. I set the row to overflow: hidden; and the columns to margin-bottom: -99999px; padding-bottom: 99999px; This solve the column height problem but I can't put space the outer part of the columns because I use all of the 12 columns. (col-md-4, col-md-4, col-md-4 / col-md-8, col-md-4) If I set side margin to the columns the last column wrapped to the next line.
The other problem to use the column as container is margin-bottom and the padding-bottom values. I can't set border-radius because the bottom border is not visible.
It's obvious to use an inner container. I did that but the inner div didn't fill the available height. I made a Codepen example.
I tried the following:
- Set the inner div position to relative/absolute with bottom: 0 value
- Set height, min-height 100% with combination of inline/block/inline-block

My first choice would be a CSS solution because of the mobile first approach but I will consider any other solution too. The jQuery is loaded (required by the JavaScript component of the bootstrap) and the knockout also loaded.

About the example. The purpose is that the aqua colored 'panels' have to be the same height (inside a row of course) even if its content is smaller than the available space. If you didn't use Codepen before, You could use the editor/full page menu to view the example in full screen.

Thanks for any advice.

Answer 1

Twitter bootstrap uses variable @grid-gutter-width which is used to set as padding for left and right of all columns if you want to increase or change space between columns then modify this variable value which you will find in variables.less

• Péter: The default value is 30px and there is no space between columns. I set to 40px but the nothing changed. I inspect the styles in chrome and this value is set to the left and right margin of the row class and the padding left and right for the columns. This not put space between the columns but the content of the columns.