Bootstrap - Removing padding or margin when screen size is smaller

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    lt div class  container-fluid  gt       lt div class  row-fluid  gt        test      lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

To solve problems like this I m using CSS - fastest  amp  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

User · Answer

The CSS by Paulius Marciukaitis 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    Never using the  container class for anything other than rows Make a clone of the  container class that has no padding for use with non-grid html 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

User · Answer

container-fluid       margin-right  auto      margin-left  auto      padding-left 0px      padding-right 0px

User · Answer

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    Test your page by temporarily deleting sections that contain containers and test your site on small browsers   This will identify your problem container  You may have a div formatting problem   If you do  fix it   If all is well then  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

[css] Bootstrap - Removing padding or margin when screen size is smaller

Examples related to css

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to media-queries