CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4spacing
Luis Alves
Luis Alves

Reputation: 1385

Bootstrap 4 responsive spacing not working

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.

Upvotes: 38

Views: 63561

Answers (3)

Rayhan
Rayhan

Reputation: 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;
  }
}

Upvotes: -2

Luis Alves
Luis Alves

Reputation: 1385

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.

Upvotes: 77

Znaneswar
Znaneswar

Reputation: 3387

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>

Upvotes: 1

Related Questions