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

Answer 1

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.

Answer 2

Simply apply a global style to all columns that have a dedicated mobile-column-size in the first place:

# Add global bottom margins to mobile columns except full width
@media all and (max-width: 767px) {
   .col-sm-1, .col-sm-2, .col-sm-3, 
   .col-sm-4, .col-sm-5, .col-sm-6,
   .col-sm-7, .col-sm-8, .col-sm-9,
   .col-sm-10, .col-sm-11 {
      margin-bottom: 20px;
   }
}

If you need certain columns to have alternative margins, just add a dedicated class to those. This approach keeps the HTML clean in most cases.

Answer 3

Bootstrap doesn't provide something for managing margins or paddings, but you could do something like this: jsFiddle link. Where you set the margin to a div with visible-xs class.

<div class="container">
  <div class="row">
  <p>123123</p>
  <div class="xs-margin visible-xs">
  </div>
  <p>asdasdadasd</p>
  </div>
</div>

with css:

.xs-margin {
    margin-bottom: 100px;
}

Answer 4

Bootstrap 4 allows hidden-sm-up classes, which toggles one object from sm to xl.

Then, you can add a column between each image column, and add this class that will be visible only in mobile devices.

More info: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

"Available classes"

Sorry my english, :D

Answer 5

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.

Answer 6

Here you go:

@media (max-width: 480px) {
    .vcenter img {
        margin-bottom: 10px;
    }
}

Assuming vcenter is the common div wrapping those images.