Bootstrap. How to add bottom margin for mobile screen only?

If you are using Bootstrap 4, you can do it with spacing utilities:

 <div class="mb-4 mb-md-0"></div>

This says:

mb-4: use a bottom margin size of 4 for all screens (xs and up)

mb-md-0: use a bottom margin size of 0 for medium (md) screens and up

You can add div with .visible-xs which only display on xtra small screens and add your custom class margin, for example:

<div class="mobile-margin visible-xs"></div>

with custom css margins:

.mobile-margin { margin-top: 0px; }

and the margin will display only for xs screen.

I have this issue a lot so I created a custom class called "mobile-space" which I add to divs that need a margin-top only in mobile:

@media screen and (max-width: 767px) {
.mobile-space {margin-top:10px;}
}

Personally, I'd go this route WITH a media query rather than adding unnecessary html markup like divs.

Related