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

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 ?

Solution 1:

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

Solution 2:

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.

Solution 3:

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>