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;
}
}
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