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

To solve problems like this I'm using CSS - fastest & simplest way I think... Just modify it by your needs...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

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

for Bootstrp 5 use .g-0 .g-md-1 this will set gutters zero for screen size smaller than 576px

<div class="container g-0 g-md-1"> ... </div>

In Bootstrap 4, the 15px margin the initial container has, cascades down to all rows and columns. So, something like this works for me...

@media (max-width: 576px) {
	.container-fluid {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.row {
		margin-left: -5px;
		margin-right: -5px;
	}
	.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
		padding-left: 5px;
		padding-right: 5px;
	}
	.row.no-gutters {
		margin-left: 0;
		margin-right: 0;
	}
}

I have had this problem occur on sites that used similar formatting and code and I have racked my brain over what was the missing detail that made some of my sites work, and some not.

For Bootstrap 3: The answer for me was not in rewriting css for .container-fluid, .row or resetting margins, the consistent pattern that I realized was the length of longer words were throwing off the design and creating margins.

The solution steps:

1. Test your page by temporarily deleting sections that contain containers and test your site on small browsers. This will identify your problem container.

2. You may have a div formatting problem. If you do, fix it. If all is well then:

3. Identify if you have used long words that are not wrapping. If you cannot change the word (like for tag lines or slogans, etc.)

Solution 1: Format the font to smaller size in your media query for smaller screen (I usually find @media (max-width: 767px) to be sufficient).

OR:

Solution 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

The CSS by Paulius Marčiukaitis worked nicely for my Genesis theme, here's what how I further modified it for my requirement:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

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

Another css that can make the margin problem is that you have direction:someValue in your css, so just remove it by setting it to initial.

For example:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}