1

I want to only apply a bootstrap margin on xs and sm devices

I've inserted mt-4 mt-sm-4 on an element so that it only targets extra small and small devices.

This works however I'm finding that the margin is also being applied on larger destkop devices so I had to zero out the margins by including mt-md-0 and mt-lg-0. Is there a reason why I have to zero out the margins as I thought that if I targetted the xs and sm devices then it would only apply there. I'm just not sure how bootstrap works, ie. if I apply a class to a smaller device, does that mean it will apply to that device plus all larger devices?

1 Answers1

0

Use mt-4 mt-md-0.

That applies:

  • margin-top 4 units on xs and small
  • margin-top 0 units on md (and larger)

Also see: How do I use the Spacing Utility Classes on Bootstrap 4

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • It's about the difference between absolute and relative sizing in the Bootstrap framework. The relative values are given in percent which can be adjusted to different pixel heights. – Manuel Rodriguez Oct 25 '19 at 10:41
  • No, not with margins. They're *all* `rem` units. The 4 represents `$spacer * 1.5` and $spacer is `1rem`. – Carol Skelly Oct 25 '19 at 10:48