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

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

Leave a Comment