How to fix divs alignment using Bootstrap

Question

How, using bootstrap, I can align all div elements on the red line?

Incorrect:

Correct:

Content in div may not be same and this is a problem. Divs where content is few paragraphs in the middle. Where a lot of text otherwise.

And I need to put all divs top edges on the all pages to a one position.

Answer 1

You need to update the bg2 class to this. Yo have a margin top on it which is pushing the container to be larger and makes the gap. http://jsfiddle.net/dSK3P/2/

.bg2 { background-color: blue;margin-bottom: 20px;}

Answer 2

Maybe this jQuery code could help you. I use this code to separate nav bar from content or vice versa.

$(window).resize(function () {
    $('content').css('margin-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () {
    $('content').css('margin-top', parseInt($('#main-navbar').css("height"))+10);
});