Bootstrap columns not aligning correctly

Question

I\'ve built a layout using Bootstrap 3, and I have the following problem: I have a news section that is set to display a total of 9 news items, 3 on each row, summing 3 rows

Answer 1

Very late to this party, however, for anyone else who stumbles on this problem:

As j.burnette said wrapping every 3 .small-article(s) in a .row class will resolve this issue.

Instead of adding additional HTML a CSS only approach would be to set a min-hight attribute for .small-article:

.small-article {
    min-height: (height of largest .small-article)px;
}

This would depend knowing the height of the tallest .small-article and setting this as the min-height. You should be able to ascertain this based on how you are generating your images and text excerpts maximum length.

If it needs to be more automated you can use CSS and JS to obtain the height of the tallest box and then apply the min-height to your .small-article classes.

For the sake of speed you can always grab a plug to do this for you. Here is a jQuery plugin I use regularly:

jquery.heightMatch.js

I assume jQuery is available as you are using BS3. I do not condone using JS plugins for such a small tasks, but chances are you will have somewhere else on your site this plugin maybe useful for matching heights