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

Answer 1

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.