Bootstrap 4 responsive spacing not working

Question

I'm using the classes as defined

Applies margin to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)

Meaning that

<div class="col-12 mb-sm-3"></div>

Should produce a div with margin bottom on small devices, but it doesn't.

Solution 1

I got what is happening. The mb-sm-3 only affects min-width of 576px so in mobile, iphone 6 for instance, min-width is less than 576 so what I needed to do was:

<div class="col-12 mb-3 mb-sm-0"></div>

This creates a margin bottom of 3 for below sm (xs in the case) and then sm and above get zero.

Thanks for your help.

Solution 2

margin-bottom: 1rem!important; is adding to .mb-sm-3

Check this

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-sm-3" style="background:blue;height:20px;"></div>
<div>Space above is the margin of the `mb-sm-3`</div>