Remove gutter space for a specific div only

Question

The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below  Gutters are the white space between columns  Gutter width seems to be between 20px - 30px  Let s assume it s 30px here     I want to remove the gutter space for a specific div  so that there will be no gutter space in the row  Each span will be next to each other with no gutter   The problem is if I remove the margin 30px  gutter  it leaves 360px  12   30px  at the end of the row   Given that I want to remove gutter space for a specific div only  Let s assume that it s for divs which are in the main content div   div main content div        no gutter for the divs in main content         How can I remove the gutter for a specific div without loosing Bootstrap responsiveness and not leaving space at the end of the row

User · Answer

Simplest way to remove padding and margin is with simple css    lt div class  header  style  margin 0px padding 0px   gt                     lt  div gt

User · Answer

Example 4 columns of span3  For other span widths use new width   old width   gutter size  Use media queries to make it responsive   css        lt style type  text css  gt       media  min-width  1200px                     nogutter  span3                       margin-left  0px  width 300px                          media  min-width  980px  and  max-width  1199px                   nogutter  span3                       margin-left  0px  width 240px                          media  min-width  768px  and  max-width  979px                   nogutter  span3                          margin-left  0px  width 186px                          lt  style gt    html    lt div class  container  gt   lt div class  row  gt     lt div class  span3  style  background-color red   gt     lt  div gt     lt div class  span3  style  background-color red   gt     lt  div gt     lt div class  span3  style  background-color red   gt     lt  div gt     lt div class  span3  style  background-color red   gt     lt  div gt   lt  div gt   lt br gt   lt div class  row nogutter  gt     lt div class  span3  style  background-color red   gt     lt  div gt     lt div class  span3  style  background-color red   gt     lt  div gt     lt div class  span3  style  background-color red   gt     lt  div gt     lt div class  span3  style  background-color red   gt     lt  div gt   lt  div gt    lt  div gt    update  or split a span12 div in 100 numberofcolumns   width parts floating left    lt div class  row  gt     lt div class  span12  gt       lt div style  background-color green width 25  float left   gt     lt  div gt     lt div style  background-color yellow width 25  float left   gt     lt  div gt     lt div style  background-color red width 25  float left   gt     lt  div gt     lt div style  background-color blue width 25  float left   gt     lt  div gt     lt  div gt   lt  div gt      For both solutions see  http   bootply com 61557

User · Answer

Since no one has mentioned this  to add to the no-gutter answer above which works  if you want custom spaced gutters  all you have to do is specify the value in px for the margin left and right properties  and padding left and right properties like so    row no-gutter   margin-left  4px  margin-right  4px      row no-gutter  class   col-   not  first-child    row no-gutter  class   col-   not  last-child    padding-right  4px  padding-left  4px

User · Answer

The total width is calculated with the width of the elements plus the width of the margin space   If you want to remove the margin space  that s fine  but to avoid that gap you mentioned  you also need to increase the width of the columns   In this case  you need to increase the width of a single column by its removed margin space  which would be 30px   So let s say your columns width is 50PX normally with 30PX margin space   Remove the margin space and make the width 80PX

User · Answer

Update   link for TWBS 3 getbootstrap com customize  grid-system    Twitter Bootstrap offers a customize form to download all or some components with custom configuration   You can use this form to download a grid without gutters  and it will be responsive - you only need the grid component and the responsive ones concerning the width   Demo  jsfiddle    If you know a little about LESS  then you can include the generated CSS in a selector of your choice      LESS     some-thing          The custom grid                      If not  you should add this selector in front of each rule  not that much anyway      If you know LESS and use the LESS scripts to manage your styles  you might want to use directly the Grid mixins v2  github   Grid mixins v3  github

User · Answer

Okay If you want to change the gutter inside one row  but want those  first and last  inner divs to align with the grid surrounding the  no-gutter row  you could copy-paste-merge most answers into the following snippet    row no-gutter  class   col-   first-child not  only-child        padding-right  0     row no-gutter  class   col-   last-child not  only-child        padding-left  0     row no-gutter  class   col-   not  first-child  not  last-child  not  only-child        padding-right  0      padding-left  0      If you like to have a smaller gutter instead of completly none  just change the 0 s to what you like     eg  5px to get 10px gutter

User · Answer

To add to Skelly s Bootstrap 3 no-gutter answer above  https   stackoverflow com a 21282059 662883   Add the following to prevent gutters on a row containing only one column  useful when using column-wrapping  http   getbootstrap com css  grid-example-wrapping     row no-gutter  class   col-   only-child   row no-gutter  class   col-   only-child       padding-right  0      padding-left  0

User · Answer

Interesting     Removing the gutter in Twitter Bootstrap s Default grid  that is  940px wide  And that the default grid has a 940px wide container and has the bootstrap-responsive css in it s stylesheet    If I got your question right  this is how I did it      lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt title gt Stackoverflow Question lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt meta name  description  content    gt       lt meta name  author  content    gt        lt  -- Le styles -- gt       lt link rel  stylesheet  href  assets css bootstrap css  gt       lt link rel  stylesheet  href  assets css bootstrap-responsive css  gt        lt  -- HTML5 shim  for IE6-8 support of HTML5 elements -- gt       lt  -- if lt IE 9  gt         lt script src  assets js html5shiv js  gt  lt  script gt       lt   endif -- gt           lt style type  text css  gt           main content  class   span                 margin-left  0              width  25                       media  min-width  768px  and  max-width  979px                 main content  class   span                 margin-left  0              width  25                                      media  max-width  767px                 main content  class   span                 margin-left  0              width  100                                     media  max-width  480px                 main content  class   span                 margin-left  0              width  100                                     lt  -- For Visual Aid Only -- gt           bg1               background-color   C2C2C2                      bg2               background-color   D2D2D2                 lt  style gt     lt body gt       lt div id  wrap  gt           lt div class  container  gt               lt div class  row-fluid  gt                   lt div class  span1 text-center bg1  gt 01 lt  div gt                   lt div class  span1 text-center bg2  gt 02 lt  div gt                   lt div class  span1 text-center bg1  gt 03 lt  div gt                   lt div class  span1 text-center bg2  gt 04 lt  div gt                   lt div class  span1 text-center bg1  gt 05 lt  div gt                   lt div class  span1 text-center bg2  gt 06 lt  div gt                   lt div class  span1 text-center bg1  gt 07 lt  div gt                   lt div class  span1 text-center bg2  gt 08 lt  div gt                   lt div class  span1 text-center bg1  gt 09 lt  div gt                   lt div class  span1 text-center bg2  gt 10 lt  div gt                   lt div class  span1 text-center bg1  gt 11 lt  div gt                   lt div class  span1 text-center bg2  gt 12 lt  div gt               lt  div gt                  lt div id  main content  gt                   lt div class  row-fluid  gt                       lt div class  span3 text-center bg1  gt 1 lt  div gt                       lt div class  span3 text-center bg2  gt 2 lt  div gt                       lt div class  span3 text-center bg1  gt 3 lt  div gt                       lt div class  span3 text-center bg2  gt 4 lt  div gt                   lt  div gt               lt  div gt           lt  div gt  lt  -- container-- gt       lt  div gt     lt  body gt   lt  html gt    And the result is      The 4 div span with no gutter will remain spanned for Small tablet landscape  800x600   Anything size smaller than that will collapse the 4 divs and it will be stacked vertically  Of course you will have to tweak it to fit your needs

User · Answer

Update 2018  For Bootstrap 3  it s much easier  Bootstrap 3 now uses padding instead of margins to create the  gutter     row no-gutter     margin-left  0    margin-right  0      row no-gutter  class   col-   not  first-child    row no-gutter  class   col-   not  last-child      padding-right  0    padding-left  0      Then just add no-gutter to any rows where spacing is to be removed      lt div class  row no-gutter  gt       lt div class  col-lg-1  gt  lt div gt 1 lt  div gt  lt  div gt       lt div class  col-lg-1  gt  lt div gt 1 lt  div gt  lt  div gt       lt div class  col-lg-1  gt  lt div gt 1 lt  div gt  lt  div gt     lt  div gt    Demo  http   bootply com 107708  Bootstrap 4  no extra CSS needed   Bootstrap 4 includes a no-gutters class that can be applied to the entire row   http   www codeply com go pVsGQZVVtG   lt div class  row no-gutters  gt       lt div class  col  gt    lt  div gt       lt div class  col  gt    lt  div gt       lt div class  col  gt    lt  div gt   lt  div gt    There are also new spacing utils that enable control of padding margins  So this can be used to change the padding  gutter  for a single column  ie   lt div class  col-3 pl-0  gt  lt  div gt   sets padding-left 0  on the column  or use px-0 to remove both the left and right padding  x-axis

User · Answer

For Bootstrap 3 0 or higher  see this answer  We re only looking at class  span1 here  one column on a 12 wide grid   but you can achieve what you want by removing the left margin from    row-fluid  class   span     margin 0      line 571 of bootstrap responsive   Then changing  row-fluid  span1 s width to equal to 100  divided by 12 columns  8 3333      row-fluid  span1   width  8 33334       line 632 of bootstrap responsive   You may want to do this by adding an additional class that would allow you to leave the base grid system intact    row-fluid  class   NoGutter     margin-left 0    row-fluid  span1NoGutter   width  8 33334      lt div class  row-fluid show-grid  gt       lt div class  span1NoGutter  gt 1 lt  div gt   lt  div gt    You could repeat this pattern for all other columns  as well    row-fluid  span2NoGutter   width 16 66667   margin-left 0      100    6 col  row-fluid  span4NoGutter   width 25   margin-left 0      100    4 col  row-fluid  span3NoGutter   width 33 33333   margin-left 0      100    3 col or  row-fluid  span4NoGutter   width 25     row-fluid  class   NoGutter     margin-left 0       EDIT  insisting on using the default grid   If the default grid system is a requirement  it defaults to a width of 940px  the  container  and  span12 classes  that is   thus  in simplest terms  you d want to divide 940 by 12  That equates to 12 containers 78 33333px wide   So line 339 of bootstrap css could be edited like so    span1   width 78 33333px  margin-left 0     or  span1   width 8 33334   margin-left 0      this should render at 78 333396px  78 333396 x 12   940 000752

[css] Remove gutter space for a specific div only

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4