I'm trying to get a wider margin for medium or wider screens, but a narrower margin for small screens.

<div class="mx-sm-1 mx-md-5">content</div>

It works for medium or wider screens. But small screens get a zero margin with this. What am I doing wrong?


Here is a JSFiddle. 575px width or below has zero margin.

  • It's working for me. Could you create a jsfiddle so that we will all see your problem? – David Liang Sep 17 at 0:31
  • Have you tried using mx-1 class? – juzraai Sep 17 at 13:11

Margins of size extra small (which is what I assume you are going for) don't need the middle notation. mx-1 should work instead.

<div class="mx-1 mx-md-5">content</div>

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.