Bootstrap 4 layout row first vs column first?

Question

Most grid layout examples in Bootstrap 4 put columns inside rows. Is it wrong to put rows inside columns ? Like this,

<div class="col col-md-6">
    <div class="row">
    </div>
</div>

Answer 1

Yes, it's totally valid to use nested columns/row. Just be sure to always use a column inside a row. Else you'll get unexpected layouts.

<div class="col">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col">
            <!-- Your content goes here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

It's a perfectly valid approach. Consider the example below:

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6"></div>
      <div class="col-6"></div>
    </div>
  </div>
  <div class="col-6">
    <div class="row">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
    </div>
  </div>
</div>

Answer 3

The [x]-col-[y] classes are all percentage based for widths. Go nuts with the nesting! Just make sure you wrap them in a row div else you'll get some funky margins