Bootstrap - Removing padding or margin when screen size is smaller

EDITED: Maybe I should ask which selector sets up the side padding when the screen is reduced to below 480px width? I have been browsing bootstrap-responsiveness.css for a while to locate this but nothing seems to affect this.

Original I basically want to remove any default padding or margin set for responsiveness on smaller device screens.

I have a background color overridden on container-fluid selector and for larger screen they render perfectly 100% across the width but they the screen is reduced to smaller sizes, by default, Bootstrap seems to add a margin or padding oncontainer-fluid or container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

If I use custom css to overwriting Bootstrap's default style, what media query or selector should I overwrite to for removing this padding on smaller screens?

The @media query specifically for 'phones' is..

@media (max-width: 480px) { ... }

But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.

Here are some queries that have worked (in most cases) for me:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

Update for Bootstrap 4

Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints): https://stackoverflow.com/a/43208888/171456

The problem here is much more complex than removing the container padding since the grid structure relies on this padding when applying negative margins for the enclosed rows.

Removing the container padding in this case will cause an x-axis overflow caused by all the rows inside of this container class, this is one of the most stupid things about the Bootstrap Grid.

Logically it should be approached by

1. Never using the .container class for anything other than rows
2. Make a clone of the .container class that has no padding for use with non-grid html
3. For removing the .container padding on mobile you can manually remove it with media queries then overflow-x: hidden; which is not very reliable but works in most cases.

If you are using LESS the end result will look like this

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Change the media query to whatever size you want to target.

Final thoughts, I would highly recommend using the Foundation Framework Grid as its way more advanced

The easy solution is to write something like that,

px-lg-1

mb-lg-5

By adding lg, the class will be applied only on large screens

This thread was helpful in finding the solution in my particular case (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}