Bootstrap Grid System new line does not look nice

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;}


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:

See my more complete answer on this issue

Leave a Comment