How to add padding to the extra small (xs) column only without affecting other sizes in bootstrap3

Question

I am using bootsrap 3 like this:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <label class="control-label" for="destination">Destination</label>
        <input type="text" name="destination" class="form-control" id="destination">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <label for="anotherInput">Another Label</label>
        <input type="text" name="anotherInput" class="form-control">
    </div>
</div>

All the columns are set properly and behave properly no matter the screen size. The problem is that when screen is xs (extra small) there is no padding between Destination label and Another Label (doesnt look good). How can I add extra padding just for size xs (extra small) without affecting padding for other screen sizes?

Answer 1

You can play just with css and media queries :

Bootply : http://www.bootply.com/124772

CSS :

@media screen and (max-width: 768px){

  *[class*='col-xs']{
    background:blue;
    padding:50px;
  }

}

PS : I just set a blue background in order to check...

Answer 2

You can use a media query to target that specific viewport size. For example if you are using a preprocessor like Sass you can use a mixin that would target exactly what you want like the following code.

div you are targeting {
  @include respondto(phone) {
  add extra padding or whatever you want
  }
}

You of course would change this code accordingly.