Bootstrap - Removing padding or margin when screen

Question

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?

Answer 1

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

Answer 2

The way I get an element to go 100% width of the device is use negative left and right margins on it. The body has a padding of 24px, so that's what you can use negative margins for:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

Answer 3

Heres what I do for Bootstrap 3/4

Use container-fluid instead of container.

Add this to my CSS

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

This removes margins below 1400px width screen