Vfrdtyky

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?

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.

If you are using bootstrap 4 and you are consuming the sass-files (rather than just importing the bootstrap css) you can use this i wrote when I wanted to solve the same problem:

$class-prefix-list: mt mb; //mr and ml can be added if needed

$breakpoint-direction-list: up down;

$breakpoint-list: xxs xs sm md lg xl;



@mixin spacer-dynamic($breakpoint, $direction, $size, $breakpoint-direction) {

@if($breakpoint-direction == 'up') {

    @include media-breakpoint-up($breakpoint) {

        @if $direction == 'mb' {

            margin-bottom: ($spacer/2) * ($size/2) !important;

        }



        @if $direction == 'mt' {

            margin-top: ($spacer/2) * ($size/2) !important;

        }



        @if $direction == 'mr' {

            margin-right: ($spacer/2) * ($size/2) !important;

        }



        @if $direction == 'ml' {

            margin-left: ($spacer/2) * ($size/2) !important;

        }

    }

}



@else if($breakpoint-direction == 'down') {

    @include media-breakpoint-down($breakpoint) {

        @if $direction == 'mb' {

            margin-bottom: ($spacer/2) * ($size/2) !important;

        }



        @if $direction == 'mt' {

            margin-top: ($spacer/2) * ($size/2) !important;

        }



        @if $direction == 'mr' {

            margin-right: ($spacer/2) * ($size/2) !important;

        }



        @if $direction == 'ml' {

            margin-left: ($spacer/2) * ($size/2) !important;

        }

    }

}

}



@each $breakpoint in $breakpoint-list {

@each $breakpoint-direction in $breakpoint-direction-list {

    @each $direction in $class-prefix-list {

        @for $i from 1 through 5 {

            .#{$direction}-#{$i}-#{$breakpoint}-#{$breakpoint-direction} {

                @include spacer-dynamic($breakpoint, $direction, $i, $breakpoint-direction);

            }

        }

    }

}

}

It will generate a css with classes like this:

@media (max-width: 1199px) {

 .mb-3-lg-down {

 margin-bottom: 1.125rem !important; } }



@media (max-width: 1199px) {

  .mb-4-lg-down {

margin-bottom: 1.5rem !important; } }

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;

}