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

Question

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 ?

Answer 1

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