15

I just need clarification with a certain point in Bootstrap Grid's rows and columns.. On this link: http://getbootstrap.com/css/#grid; the 3rd point under Introduction says: "Content should be placed within columns, and only columns may be immediate children of rows."

What exactly does this mean? What I am trying to do is put 2 columns: col-xs-4, col-xs-8; inside col-xs-12 which is itself inside a row. Will this work..

<div class="row">
<div class="col-xs-12">
    <div class="col-xs-4">some content</div>
    <div class="col-xs-8">some other content</div>
</div>

Or will I have to insert a new(and nested..i suppose) row inside xol-xs-12 and then the other 2 cols in that row ?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Rahul Patwa
  • 2,319
  • 4
  • 18
  • 17

4 Answers4

23

Bootstrap 5 (update 2022)

Technically row isn't required in Bootstrap 5 since columns can be used standalone to set width, However, row is still needed for the flexbox grid system which is primary how columns are used.

Bootstrap 3, Bootstrap 4 (original answer)

Bootstrap Rows and Columns - Do I need to use row?

Yes, you need to use row.

Update 2018

The row>col relationship is the same in both Bootstrap 3 and 4 in that..

"only columns may be immediate children of rows"

So, the nested columns (.col-*) must also be inside a .row:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

As you can see here you should always use the row. This is very important in Bootstrap 4 because the columns will simply stack (wrap) vertically if not placed inside a .row. The .row has a negative margin of 15px on either side, so the benefit is that..

  • 100% width content inside container
  • separate content into rows (force cols to be on line)
  • nest the grid row>col and maintain alignment on outer sides

From the Bootstrap 3 Docs...

Content should be placed within columns, and only columns may be immediate children of rows.

From the Bootstrap 4 Docs...

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side... content must be placed within columns and only columns may be immediate children of rows.

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    thanks you for your answer, and especially the links! I now see the difference between using the inner row vs not using it, is that it affects the 15px margin of content :) So far i was thinking that it should break the markup and not work if the inner row was omitted. – Rahul Patwa Mar 04 '14 at 09:43
  • So, whats a row-col ? Can you explain it with material ui components? I understand row is grid container and col is grid item so far. – Ali Mert Çakar Oct 01 '20 at 15:37
  • row-col is new for Bootstrap 4.2+ and Bootstrap 5. It simplifies the markup since it only requires adding a CSS class to the row, instead of all columns inside the row. – Carol Skelly Aug 14 '21 at 11:54
10

2021 Update

No, you no longer need rows. From the Bootstrap 5.0 documentation:

The .col-* classes can also be used outside a .row to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.

woodvi
  • 1,898
  • 21
  • 27
2

You should have parent <div class="row"> for using <div class="col-*>

something like this 

<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-4">some content</div>
      <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>
Mo.
  • 26,306
  • 36
  • 159
  • 225
  • Now in the above code if i remove the 2nd row div.. and have col-xs-4 & col-xs-8 directly under col-xs-12 then also it works without any issue. that's the thing i am WONDERING about? it shouldn't work if i go by the documentation but it does! – Rahul Patwa Mar 04 '14 at 09:42
  • @RahulPatwa for that you need to **nest** http://getbootstrap.com/css/#grid-nesting – Mo. Mar 04 '14 at 10:25
1

Always use the following pattern:

<div class="container">
   <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6"> some content </div>
          <div class="col-md-6"> another content </div>
        </div>
      </div>
   </div>
</div>

Always use row class inside col and container class , never use col inside col class and never directly use col class inside container class

Sunderam Dubey
  • 1
  • 11
  • 20
  • 40