Note: Bootstrap 4 doesn't seem to have this issue, as it uses flexbox rather than floats for the grid columns. For Bootstrap 3 or earlier, this is a limitation of floats.
If all your items are identical height, this isn't an issue, but if you have dynamic content AND a dynamic number of items, you've got a fight on your hands.
As some of the other answers have already suggested, you could add more elements to your markup. However, if you are using bootstrap along with a template where there's an unknown number of items (col--) being added to the row, it will usually take some sort of scripting to wrap the right number of items in each row. Also, for example if you have items that are 4 across (col-md-3) on large screens, but 3 across (col-md-4) on small screens, you'll end up with every 4th item on it's own row on small screens.
Thanks to CSS3, there are some ways to fix this alignment problem without scripting when your items are consitently using the same set of grid classes. If you add the class multi-row-helper
to your bootstrap row, the CSS below will clear the float on the first item of each new line of items, keeping them from being affected by the irregular size of the items above.
/** EDIT: Updated the breakpoint to bootstrap defaults - I inadvertently had put in some custom ones...Replace the px values with the values of your breakpoints!! **/
.multi-row-helper div[class~="col-xs-2"]:nth-child(6n+1),
.multi-row-helper div[class~="col-xs-3"]:nth-child(4n+1),
.multi-row-helper div[class~="col-xs-4"]:nth-child(3n+1),
.multi-row-helper div[class~="col-xs-6"]:nth-child(2n+1) {
clear: left;
}
@media (min-width: 768px) {
.multi-row-helper.row > div[class*="col-xs-"] {
clear: none;
}
.multi-row-helper div[class~="col-sm-2"]:nth-child(6n+1),
.multi-row-helper div[class~="col-sm-3"]:nth-child(4n+1),
.multi-row-helper div[class~="col-sm-4"]:nth-child(3n+1),
.multi-row-helper div[class~="col-sm-6"]:nth-child(2n+1) {
clear: left;
}
}
@media (min-width: 992px) {
.multi-row-helper.row > div[class*="col-sm-"] {
clear: none;
}
.multi-row-helper div[class~="col-md-2"]:nth-child(6n+1),
.multi-row-helper div[class~="col-md-3"]:nth-child(4n+1),
.multi-row-helper div[class~="col-md-4"]:nth-child(3n+1),
.multi-row-helper div[class~="col-md-6"]:nth-child(2n+1) {
clear: left;
}
}
Not the simplest solution, but if you use a lot of repeating grids, such as for an e-commerce product grid, on your site, it's often well worth a few extra lines of CSS to solve this issue.
For what it's worth, it's a little prettier using SCSS:
.multi-row-helper {
div[class~="col-xs-2"]:nth-child(6n+1),
div[class~="col-xs-3"]:nth-child(4n+1),
div[class~="col-xs-4"]:nth-child(3n+1),
div[class~="col-xs-6"]:nth-child(2n+1)
{clear:left;}
@media (min-width:768px) {
&.row > div[class*="col-xs-"]
{clear:none;}
div[class~="col-sm-2"]:nth-child(6n+1),
div[class~="col-sm-3"]:nth-child(4n+1),
div[class~="col-sm-4"]:nth-child(3n+1),
div[class~="col-sm-6"]:nth-child(2n+1)
{clear:left;}
}
@media (min-width:992px) {
&.row > div[class*="col-sm-"]
{clear:none;}
div[class~="col-md-2"]:nth-child(6n+1),
div[class~="col-md-3"]:nth-child(4n+1),
div[class~="col-md-4"]:nth-child(3n+1),
div[class~="col-md-6"]:nth-child(2n+1)
{clear:left;}
}
}