Bootstrap - does all 'rows' MUST be followed with a column?

Question

I know this is a silly question, but I can't seem to find an answer on the net for this. For bootstrap, I know you use rows and cols to specify the size of the row. But if I have something like this:

<div class='row'>
    <div class='col-md-12'></div>
</div>

Is there any point in adding that col-md-12? I would of thought just sticking the row class is enough if you wanted the full length of the row??

Any advice on this will be greatly appreciated.

Thanks

Answer 1

Yes, you probaly want the col. Inspect it with your browser's developer tools. You'll see margin /padding and other styling gets applied to .col-* to get things to line up properly.

The .row class primarily provides the "float clearing" that columns provide.

Columns as you know allow for a variety of "grid layout" widths / sizes, and automatically adjust to responsive browser size needs.

Run the snippet below to see the difference (click the "Full Page" link, otherwise it's compressed into a small view). (Note that I've added borders to rows / cols to highlight what's going on):

.row {
  border: 1px solid red;
}

[class^="col-"] {
  border: 1px solid black;
}

.other {
  border: 1px solid blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      This is a row with a full-width column.
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      This row has a few smaller column.
    </div>
    <div class="col-sm-4">
      This row has a few smaller column.
    </div>
    <div class="col-sm-4">
      This row has a few smaller column.
    </div>
  </div>
  <div class="row">
    This row has no columns.
  </div>
  <div class="other">This has no columns nor rows.</div>
</div>

Answer 2

A .row and a .col-X-X are different things. Yes, you will need the column + a row. If you use Bootstrap 4, you can just use the .col class whereas in Bootstrap 3 you must use .col-X-12 for full width.

From the bootstrap 3 docs

1) Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

2) The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.