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

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.

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

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>

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