Is padding in `col` in Bootstrap 4 Grid System OK?

Question

I am using Bootstrap v. 4 for the first time.

I have footerone that uses a new flex colone and it works great on the desktop. But when I switch to mobile, they are stacked so close to each other that there is no vertical margin / padding.

Is this normal behavior?

In addition, I would prefer the content to be centered or at least have some bias. But using an offset results in a top fill instead of a left or right offset.

Is this normal behavior?

If so, what will be the recommended, “official” approach to adding top margin / padding on mobile phones and offsets?

Thank!

Without bias:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="kpc-row-10">

  <div class="container">

    <div class="row">

      <div class="col-sm">
      </div>
      
      <div class="col-sm">
      </div>
      
      <div class="col-sm">
      </div>
      
      <div class="col-sm">
      </div>

    </div>

  </div>
    
</div>

Run codeHide result

With offset:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="kpc-row-10">

  <div class="container">

    <div class="row">

      <div class="col-sm offset-sm-2">
      </div>
      
      <div class="col-sm offset-sm-2">
      </div>
      
      <div class="col-sm offset-sm-2">
      </div>
      
      <div class="col-sm offset-sm-2">
      </div>

    </div>

  </div>
    
</div>

Run codeHide result

Answer 1

" , /"

, , Bootstrap . , Bootstrap 4 , ...

, my-3 ( Y).

<div class="container">
    <div class="row">
        <div class="col-sm my-3">

        </div>
        <div class="col-sm my-3">

        </div>
        <div class="col-sm my-3">

        </div>
        <div class="col-sm my-3">

        </div>
    </div>
</div>

: http://www.codeply.com/go/ABUaBgCNbE

. spacing.