Bootstrap: Multiple nested rows within row?

Question

I know you can nest rows within nested columns, but is it 'against the rules' to nest rows directly within rows?

eg:

<div class="row">

  <div class="row">
     cols in here
  </div>

  <div class="row">
     cols in here
  </div>

  <div class="row">
     cols in here
  </div>

</div>

Or must these always be within columns?

Per bootstrap guidelines, third point under introduction - "..and only columns may be immediate children of rows". This is because of the padding which Bootstrap uses for its layout, it is a good practice to nest via row-column-row pattern. — Abhitalks
– Abhitalks, Commented Sep 7, 2015 at 7:27
@Abhitalks ah cool. Want to make that an answer so I can accept it? — MeltingDog
– MeltingDog, Commented Sep 7, 2015 at 7:30

Abhitalks · Accepted Answer · 2017-10-05 10:33:24Z

13

is it 'against the rules' to nest rows directly within rows?

Not against the rules as such, but not a best practice as per the guidelines.

Per bootstrap guidelines, third point under introduction -

..and only columns may be immediate children of rows".

*_{Edit: This is still true with Bootstrap 4.0 Beta. The link to the docs above will automatically redirect to the version 3.3 documentation. Thank you @Aakash for pointing this out.}

This is because of the padding which Bootstrap uses for its layout, it is a good practice to nest via row-column-row pattern i.e. nest a row with one column across to nest.

See the difference in the snippet below. The first set of markup breaks the Bootstrap layout, although nothing bad happens.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="row">
      <div class="col-xs-6">One</div>
      <div class="col-xs-6">Two</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-6">One</div>
        <div class="col-xs-6">Two</div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-12">One</div>
    <div class="col-xs-12">Two</div>
    <div class="col-xs-12">Three</div>
  </div>
</div>

edited Oct 5, 2017 at 10:33

answered Sep 7, 2015 at 7:34

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MeltingDog Over a year ago

Thanks Abitalks. Would you know anyway to achieve something like my above example?

Abhitalks Over a year ago

One simple way would be (without nesting) - instead of the inner rows, just mark them up as columns with 12 col width (col-xs-12). They will then automatically become rows.

MeltingDog Over a year ago

ah, so you can have multiple columns that exceed 12 long? That's by the book?

Abhitalks Over a year ago

@MeltingDog: There. added into the answer code, a third markup set which is your use-case.

Rogelio Over a year ago

This is old, I know, but as this shows up in response to a specific question, see bootstrap 4 documentation where a row is a direct child of a column: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

|

Collectives™ on Stack Overflow

Bootstrap: Multiple nested rows within row?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related