Bootstrap Grid System new line does not look nice

Question

Recently, I started making an admin page on my site to edit multiple small tables (1-5 entries). They got all displayed on one page, and the tables got nested in a div as fo

Answer 1

This is due to varying column height. You need a "clearfix" reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this..

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

Demo: http://codeply.com/go/mONLiFj30T

For other "clearfix" scenarios with different col width and grid tiers, there is a universal CSS only clearfix solution which will fit more scenarios (unsupported).

Another solution would be CSS columns, for a "masonry" style layout, but it doesn't use the Bootstrap grid: http://www.bootply.com/mYkzRDvbEq

See my more complete answer on this issue