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>