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.

Astrobiology

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.

Astrobiology

Seems totally counter intuitive on Bootstrap's part. – Seaman

I think that's called mobile first approach – Thurston

Just want to add on to this for anyone researching Bootstrap's grid system. Bootstrap uses a mobile first approach, meaning that they design everything as if it were being designed on a phone, and as you gradually increase the screen width it will adapt. In this case you need to set the margin for the mobile screen width first, and as you increase the screen size you can then adjust the margin. – Schwing

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

Hallam

Answer 3

You should use CSS for responsive spacing.

.my-margin {
    margin-bottom: 0;
  }
@media only screen and (max-width: 576px) {
  .my-margin {
    margin-bottom: 2rem;
  }
}

Anaemia