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

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?

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.

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

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.

Here you go:

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

Assuming vcenter is the common div wrapping those images.

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;
}