Bootstrap 4 correct way to use row and col classes

Question

In my div element I want to put two rows. The first row contains two input elements.For that reason I can put that two input elements into two separate columns.

But in my second row there is only one button element.I can't put two separate columns. This is my code right now.

<div id="app">
    <div class="row">
      <div class="col">
        First name: <input type="text" name="" value="">
      </div>

      <div class="col">
        Last name:  <input type="text" name="" value="">
      </div>
    </div>

    <div class="row">
        <button type="button" name="button">Save</button>
    </div>
  </div>

For the second row instead of that should I have to wrap that button inside a column. Like this

<div class="row">
      <div class="col">
        <button type="button" name="button">Save</button>
      </div>
    </div>

Or my previous code is just fine? What is the professional way to do this. I hope you understand my question. thank you.

Answer 1

For the second row instead of that should I have to wrap that button inside a column. Like this

Yes, only a Bootstrap column is allowed to be a direct child of a Bootstrap row.

So, in every Bootstrap row, you must have at least one Bootstrap column and all of your content must go into Bootstrap columns and never into Bootstrap rows directly.

This is because Bootstrap rows and columns are designed to work in pairs i.e. no content may ever be placed directly into a Bootstrap row. Only Bootstrap columns may be direct children of Bootstrap rows.

Reference:

https://getbootstrap.com/docs/4.0/layout/grid/