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.

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