How to apply style only to particular screen type in bootstrap

Question

I have a general style definition as

.main-site-nav li a {
    padding-left: 0;
}

Now want to apply a different style only for .main-site-nav li a in extra small screens (xs) only as follows.

/* xs screens only */
.main-site-nav li a {
    padding-left: 15;
}

How can I do it?

Thanks

Answer 1

The selectors used in BS3 (v3.2.0), if you want to stay consistent:

@media(max-width:767px){
  .main-site-nav li a {
    padding-left: 15;
  }
}

This will take care of your xs screen

refer : Twitter Bootstrap 3: how to use media queries?