Bootstrap Grid System new line does not look nice

by

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

More Related Contents:

  1. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  2. Change the order of col-*-12 columns in Bootstrap using push/pull
  3. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  4. Bootstrap dropdown sub menu missing
  5. Order columns through Bootstrap4
  6. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  7. Center a column using Twitter Bootstrap 3
  8. Bootstrap 3 fluid grid layout issues?
  9. Bootstrap 3 Navbar with Logo
  10. How to change the bootstrap primary color?
  11. Why did Bootstrap 3 switch to box-sizing: border-box?
  12. Bootstrap: how to stack divs of different heights?
  13. Bootstrap icons are loaded locally but not when online
  14. Right to Left support for Twitter Bootstrap 3
  15. Input widths on Bootstrap 3
  16. Bootstrap 3 – Use more than 12 columns in a row
  17. Bootstrap xs columns wrap
  18. Changing the width of Bootstrap popover
  19. How to change btn color in Bootstrap
  20. Bootstrap 3 – desktop view on a mobile device
  21. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  22. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  23. Make column fixed position in bootstrap
  24. Bootstrap 3: pull-right for col-lg only
  25. How to use vertical align in bootstrap
  26. How to add a search box with icon to the navbar in Bootstrap 3?
  27. Bootstrap change div order with pull-right, pull-left on 3 columns
  28. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  29. Vertically align Bootstrap badge inside heading
  30. Center a column using Twitter Bootstrap

Leave a Comment