One vs. multiple rows in Bootstrap

Question

Say I want to have 6 columns, each spanning 4 grid columns in Bootstrap. Is there a difference, functionality-wise, between:

...

<div class="row">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
</div>

vs.

<div class="row">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
</div>
<div class="row">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
</div>

Will there be any side-effect if I put more than 12 grid-columns inside a single Bootstrap row? As I understand, each new column automatically goes into a new row if it doesn't fit into the existing row 12-grid columns.

I'm using Bootstrap 3.3.7.

Answer 1

It seems there is no difference BUT in reality there is a big difference and this is due to floating. When using only one row class you may have floating issue when the columns don't have the same height.

Here is an example:

.col-xs-4 {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>

As you can see the first col-xs-4 is pushing the ones in the second row and creating an issue and this is because we don't clear floating.

But if you consider the second configuration, we won't have this issue as they are separated:

.col-xs-4 {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem </div>
  </div>
  <div class="row">
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>

So both configuration can provide same output in some cases but they behave differently due to floating.

Here is some related questions to get more details:

Floated elements of variable height push siblings down

Bootstrap row with columns of different height

Why is my Bootstrap column centered instead of left-aligned?

---

In Bootstrap 4 there is no more this issue since this version rely on flex, so both configuration will behave exactly the same:

.col-4 {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
first one
<div class="container">
  <div class="row">
    <div class="col-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem </div>
  </div>
  <div class="row">
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>
second one
<div class="container">
  <div class="row">
    <div class="col-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>