Bootstrap 4 responsive spacing not working

twitter-bootstrap bootstrap-4 spacing
Luis Alves picture Luis Alves · Nov 23, 2017 · Viewed 30.5k times · Source

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

Luis Alves picture Luis Alves · Nov 23, 2017

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.

Related questions

Adding space between columns in Bootstrap 4

How I want it to look like: I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way …

Read More
Change navbar color in Twitter Bootstrap

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

Read More
How can I get my Twitter Bootstrap buttons to right align?

I have a simple demo here: http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2">&…

Read More