Is no padding on `col` in Bootstrap 4 Grid System normal?

Question

I'm using Bootstrap v. 4 for the first time.

I have a footer that is using the new flex col's and it works great on desktop. But when I switch to mobile they're stacked so closely to each other there is no vertical margin / padding.

Is this the normal behavior?

Also, I would prefer the content is centered or at least have some offset. But using offset results in top padding instead of left or right offset.

Is that normal behavior?

If so, what would be the recommended, "official", approach to adding top margin/padding on mobile only and offset?

Thank you!

Without 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">
      </div>
      
      <div class="col-sm">
      </div>
      
      <div class="col-sm">
      </div>
      
      <div class="col-sm">
      </div>

    </div>

  </div>
    
</div>

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>

Yes, normal. Just add the vertical padding/margin that you need? There is no vertical margin/padding in columns or rows in bootstrap-3 either. You can center content a number of ways. You'd need to post your code with descriptions of what you've tried and what isn't working for us to help. — Michael Coker, Apr 11 '17 at 23:18
Okay, thank you @MichaelCoker. I think that is probably the answer to my question but I'll post the code in a moment. — Spencer Hill, Apr 11 '17 at 23:23
Okay, I've updated it with a link to a Gist. Nothing special. — Spencer Hill, Apr 11 '17 at 23:28
Be sure to include your code in the post itself when you can, no need for a gist here, it's just HTML. Check out how I edited your post and try to do that yourself in the future please. If your github or gist or whatever changes in a year and someone googles this post and lands here, they won't be able to reference your code if you don't include it in the post itself. — Michael Coker, Apr 11 '17 at 23:35

score 3 · Accepted Answer · edited Sep 22 '17 at 14:46

"they're stacked so closely to each other there is no vertical margin / padding"

As already mentioned in the comments, and in other questions, there is no vertical spacing between columns in Bootstrap. However, Bootstrap 4 has spacing utility classes you can utilize to adjust the margins or padding...

For example my-3 will add a top and bottom (y-axis) margin to each column.

<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>

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

See my other answer for more info on the spacing utilities.

Is no padding on `col` in Bootstrap 4 Grid System normal?

1 Answers1

Linked