Bootstrap 3 4 and 5 container-fluid with grid adding unwanted padding

Question

I d like my content to be fluid  but when using  container-fluid with Bootstrap s grid  I m still seeing padding  How can I get rid of the padding  I see that I don t get the padding with  row  but I want to add columns  and as soon as I do  the padding is back  I want to be able to use the columns at full width  An example   lt div class  quot container-fluid quot  gt       lt div class  quot row quot  gt         lt div class  quot col-sm-6 quot  gt       lt p gt Use this document as a way to quickly start any new project  lt br gt  All you get is this text and a mostly barebones HTML document  lt  p gt     lt  div gt      lt div class  quot col-sm-6 quot  gt       lt p gt Use this document as a way to quickly start any new project  lt br gt  All you get is this text and a mostly barebones HTML document  lt  p gt     lt  div gt    lt  div gt   Solution I ve got  Override bootstrap css  linke 1427  amp  1428  v3 2 0  padding-right  15px  padding-left  15px   to padding-right  0px  padding-left  0px

User · Answer

Use px-0 on the container and no-gutters on the row to remove the paddings  Quoting from Bootstrap 4 - Grid system   Rows are wrappers for columns  Each column has horizontal padding  called a gutter  for controlling the space between them  This padding is then counteracted on the rows with negative margins  This way  all the content in your columns is visually aligned down the left side    Columns have horizontal padding to create the gutters between individual columns  however  you can remove the margin from rows and padding from columns with  no-gutters on the  row   Following is a live demo   x000D   x000D  h1     background-color  tomato    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  integrity  sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm  crossorigin  anonymous    gt    lt div class  container-fluid  id  div1  gt     lt div class  row  gt       lt div class  col  gt           lt h1 gt With padding     lt  h1 gt       lt  div gt     lt  div gt   lt  div gt    lt div class  container-fluid px-0  id  div1  gt     lt div class  row no-gutters  gt       lt div class  col  gt           lt h1 gt No padding    gt   lt  h1 gt       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D   The reason this works is that container-fluid and col both have following padding  padding-right  15px  padding-left  15px   px-0 can remove the horizontal padding from container-fluid and no-gutters can remove the padding from col

User · Answer

You should also add a  row  to each container which will  fix  this issue    lt div class  container-fluid  gt      lt div class  row  gt          Some text     lt  div gt   lt  div gt    See http   jsfiddle net 3px20h6t

User · Answer

Why not negate the padding added by container-fluid by marking left and right padding as 0     lt div class  container-fluid pl-0 pr-0  gt   even better way  no padding at all at the container level  cleaner    lt div class  container-fluid pl-0 pr-0  gt

User · Answer

If you are working with the configuratior you can set the  grid-gutter-width from 30px to 0

User · Answer

I ve been struggling with this myself and I finally believe I have it figured out   It s incredible how many failed answers there are on this question  All you have to do is remove the padding from all your  col elements  and remove the padding also from the  container-fluid   I did this in my own project a little sloppily by adding the following to my css file    col  col-10  col-12  col-2  col-6       padding  0 important      container-fluid       padding  0 important      I just have the different col sizes there to account for all the different col sizes I m using   I m confident there is a cleaner way to write the css but this illustrates the end result

User · Answer

I think I had the same requirement as Tim  but none of the answers provide for a  viewport edge-to-edge columns with normal internal gutters  solution  Or another way to put it  how can I get my first and last columns to break into the container padding and flow to the edge of the viewport  while still maintaining normal gutters between the columns     From what I can tell  there is no neat and clean solution  This is what works for me  but it is well outside anything that would be supported by Bootstrap  But it works for now  Bootstrap 3 3 5  amp  4 0-alpha    http   www bootply com ioWBaljBAd  Sample HTML    lt div class  container  gt     lt div class  row full-width-row  gt       lt div gt         lt div class  col-sm-4 col-md-3  gt     lt  div gt         lt div class  col-sm-4 col-md-3  gt     lt  div gt         lt div class  col-sm-4 col-md-3  gt     lt  div gt         lt div class  col-sm-4 col-md-3  gt     lt  div gt       lt  div gt     lt  div gt   lt  div gt    CSS    full-width-row     overflow-x  hidden      full-width-row  gt  div     margin-left  -15px    margin-right  -15px      The trick is to nest a div in between the row and the columns to generate the extra -15px margin to push into the container padding  The extra negative margin creates horizontal scroll  into whitespace  on small viewports  Adding overflow-x  hidden to the  row is required to suppress it   This works the same for  container-fluid as  container

User · Answer

In the new alpha versions they ve introduced utility spacing classes  The structure can then be tweaked if you use them in a clever way   Spacing utility classes   lt div class  container-fluid  gt       lt div class  row  gt           lt div class  col-sm-4 col-md-3 pl-0  gt     lt  div gt           lt div class  col-sm-4 col-md-3  gt     lt  div gt           lt div class  col-sm-4 col-md-3  gt     lt  div gt           lt div class  col-sm-4 col-md-3 pr-0  gt     lt  div gt       lt  div gt   lt  div gt    pl-0 and pr-0 will remove leading and trailing padding from the columns  One issue left is the embedded rows of a column  as they still have negative margin  In this case    lt div class  col-sm-12 col-md-6 pl-0  gt       lt div class  row ml-0  gt   lt  div gt    Version differences  Also note the utility spacing classes were changed since version 4 0 0-alpha 4  Before they were separated by 2 dashes e g     p-x-0 and p-l-0 and so on       To stay on topic for the version 3  This is what I use on Bootstrap 3 projects and include the compass setup  for this particular spacing utility  into bootstrap-sass  version 3  or bootstrap  version 4 0 0-alpha 3  with double dashes or bootstrap  version 4 0 0-alpha 4 and up  with single dashes   Also  latest version s  go up  till 5 times a ratio  ex  pt-5 padding-top 5  instead of only 3     Compass   grid-breakpoints   xs  0  sm  576px  md  768px  lg  992px  xl  1200px   default    import     scss mixins breakpoints      media-breakpoint-up  breakpoint-infix  import     scss utilities  spacing scss     CSS output  You can ofcourse always copy paste the padding spacing classes only from a generated css file    p-0   padding  0  important     pt-0   padding-top  0  important     pr-0   padding-right  0  important     pb-0   padding-bottom  0  important     pl-0   padding-left  0  important     px-0   padding-right  0  important  padding-left  0  important     py-0   padding-top  0  important  padding-bottom  0  important     p-1   padding  0 25rem  important     pt-1   padding-top  0 25rem  important     pr-1   padding-right  0 25rem  important     pb-1   padding-bottom  0 25rem  important     pl-1   padding-left  0 25rem  important     px-1   padding-right  0 25rem  important  padding-left  0 25rem  important     py-1   padding-top  0 25rem  important  padding-bottom  0 25rem  important     p-2   padding  0 5rem  important     pt-2   padding-top  0 5rem  important     pr-2   padding-right  0 5rem  important     pb-2   padding-bottom  0 5rem  important     pl-2   padding-left  0 5rem  important     px-2   padding-right  0 5rem  important  padding-left  0 5rem  important     py-2   padding-top  0 5rem  important  padding-bottom  0 5rem  important     p-3   padding  1rem  important     pt-3   padding-top  1rem  important     pr-3   padding-right  1rem  important     pb-3   padding-bottom  1rem  important     pl-3   padding-left  1rem  important     px-3   padding-right  1rem  important  padding-left  1rem  important     py-3   padding-top  1rem  important  padding-bottom  1rem  important     p-4   padding  1 5rem  important     pt-4   padding-top  1 5rem  important     pr-4   padding-right  1 5rem  important     pb-4   padding-bottom  1 5rem  important     pl-4   padding-left  1 5rem  important     px-4   padding-right  1 5rem  important  padding-left  1 5rem  important     py-4   padding-top  1 5rem  important  padding-bottom  1 5rem  important     p-5   padding  3rem  important     pt-5   padding-top  3rem  important     pr-5   padding-right  3rem  important     pb-5   padding-bottom  3rem  important     pl-5   padding-left  3rem  important     px-5   padding-right  3rem  important  padding-left  3rem  important     py-5   padding-top  3rem  important  padding-bottom  3rem  important

User · Answer

You only need these CSS properties in  container class of Bootstrap and you can put inside him the normal grid system without someone content of the container will be out of him  without scroll-x in the viewport    HTML      lt div class  container  gt       lt div class  row  gt           lt div class  col-xs-12  gt              Your content here                               lt  div gt       lt  div gt          more rows  lt  div gt    CSS      Bootstrap custom     container      padding-left  0rem      padding-right  0rem      overflow  hidden

User · Answer

I think no one has given the correct answer to the question  My working solution is   1  Just declare another class along with container-fluid class example  maxx     x000D   x000D    lt div class  container-fluid maxx  gt  x000D      lt div class  row  gt  x000D        lt div class  col-sm-12  gt  x000D        lt p gt Hello lt  p gt  x000D        lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D   x000D   x000D     Then using specificity in the css part do this     x000D   x000D   container-fluid maxx   x000D    padding-left  0px  x000D    padding-right  0px    x000D   x000D   x000D    This will work 100  and will remove the padding from left and right  I hope this helps

User · Answer

So here is the brief summary for Bootstrap 4    lt div class  container-fluid px-0  gt     lt div class  row no-gutters  gt       lt div class  col-12  gt             any cols you need                  lt  div gt     lt  div gt   lt  div gt    It works for me

User · Answer

5 years passed  and it s quite strange that there are so many answers there which don t follow  or are against  bootstrap rules or don t actually answer the question     For the details on those mistakes check the last section of this answer  Short Answer  Simply use Bootstrap s no-gutters class in your row to remove padding     lt div class  quot container-fluid quot  gt       lt div class  quot row no-gutters quot  gt         lt div class  quot col-sm-6 quot  gt           lt p gt Use this document as a way to quickly start any new project  lt br gt  All you get is this text and a mostly           barebones HTML document  lt  p gt         lt  div gt         lt div class  quot col-sm-6 quot  gt           lt p gt Use this document as a way to quickly start any new project  lt br gt  All you get is this text and a mostly           barebones HTML document  lt  p gt         lt  div gt       lt  div gt     lt  div gt    Also you ve forgotten to add  lt  div gt  to the end of your file  It s fixed in the code above as well  Note  There are cases when you want to remove the padding of the container itself as well  In this case consider dropping  container or  container-fluid classes as recommended by the documentation   lt  -- lt div class  quot container-fluid quot  gt -- gt   lt div class  quot row no-gutters quot  gt     lt div class  quot col-sm-6 quot  gt       lt p gt Use this document as a way to quickly start any new project  lt br gt  All you get is this text and a mostly       barebones HTML document  lt  p gt     lt  div gt     lt div class  quot col-sm-6 quot  gt       lt p gt Use this document as a way to quickly start any new project  lt br gt  All you get is this text and a mostly       barebones HTML document  lt  p gt     lt  div gt   lt  div gt   lt  -- lt  div gt -- gt   Long Answer  The paddings you get are actually documented in Bootstrap s documentation   Rows are wrappers for columns  Each column has horizontal padding  called a gutter  for controlling the space between them  This padding is then counteracted on the rows with negative margins  This way  all the content in your columns is visually aligned down the left side   And about the solution  which was documented as well   Columns have horizontal padding to create the gutters between individual columns  however  you can remove the margin from rows and padding from columns with  no-gutters on the  row   Regarding dropping the container   Need an edge-to-edge design  Drop the parent  container or  container-fluid   Bonus  About the mistakes found on the other answers  Avoid hacking bootstrap s container classes instead of making sure that you ve put all the content in col-s and wrapped them with row-s as documentation says    In a grid layout  content must be placed within columns and only columns may be immediate children of rows    If you still have to do hack  just in case someone already messed up things and you need to quickly fix your issue  consider using Bootstrap s px-0 for removing horizontal paddings instead pl-0 pr-0 or reinventing your styles

User · Answer

I have used  lt div class  container-fluid  style  padding  0px  important  gt  and it seems to be working

User · Answer

Please find the actual css from Bootstrap   container-fluid     padding-right  15px    padding-left  15px    margin-right  auto    margin-left  auto     row     margin-right  -15px    margin-left  -15px      When you add a  container-fluid class  it adds a horizontal padding of 15px  and the same will be removed when you add a  row class as a child element by the negative margin set on row

[twitter-bootstrap] Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to twitter-bootstrap-3

Examples related to bootstrap-5