36

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.

Luis Alves
  • 1,315
  • 1
  • 10
  • 16

3 Answers3

73

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.

Luis Alves
  • 1,315
  • 1
  • 10
  • 16
  • 14
    Seems totally counter intuitive on Bootstrap's part. – crystallove18 Jun 07 '18 at 17:45
  • 6
    I think that's called mobile first approach – yeahman May 19 '19 at 07:00
  • 6
    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. – lovinghate Aug 20 '20 at 00:17
1

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>
Znaneswar
  • 3,329
  • 2
  • 16
  • 24
-1

You should use CSS for responsive spacing.

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