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

Question

I have this HTML code

<div class="row">             <div class="col-xs-12">                 <div class="titulo">                     <h2 class="title-section font-switch">Algunos tecnologias que manejamos</h2>                     <span>Si no vez el que necesitas pregunta, a veces no ponemos todos</span>                 </div>               </div>             <div class="col-xs-12 col-sm-8 col-sm-offset-2">                 <div class="row center">                     <div class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0  vcenter">                          <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">                             <div class="caption">                                 <div class="caption-content">                                     <i class="fa fa-search-plus fa-3x"></i>                                 </div>                             </div>                             <img src="img/csharp.png" class="img-responsive" alt="">                         </a>                     </div>                     <div class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0  vcenter">                           <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">                             <div class="caption">                                 <div class="caption-content">                                     <i class="fa fa-search-plus fa-3x"></i>                                 </div>                             </div>                             <img src="img/java.jpg" class="img-responsive" alt="">                         </a>                     </div>                      <div class="col-xs-10 col-xs-offset-1 col-sm-3  col-sm-offset-0  vcenter">                          <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">                             <div class="caption">                                 <div class="caption-content">                                     <i class="fa fa-search-plus fa-3x"></i>                                 </div>                             </div>                             <img src="img/cmasmas.png" class="img-responsive" alt="">                         </a>                      </div>                      <div class="col-xs-10 col-xs-offset-1 col-sm-3  col-sm-offset-0  vcenter">                          <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">                             <div class="caption">                                 <div class="caption-content">                                     <i class="fa fa-search-plus fa-3x"></i>                                 </div>                             </div>                             <img src="img/androidstudio.png" class="img-responsive" alt="">                         </a>                        </div>                    </div>             </div>           </div> 

this is displayed as it:

but when screen size is changed to mobile screen the view is it:

a margin is needed (top or bottom or both)

I know I could add it with Media queries, but I believe if I am using bootstrap I must to use less posible the media queries.

How can I add a margin only for mobile screen?

Answer 1

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