Remove padding from columns in Bootstrap 3

Question

Problem   Remove padding margin to the right and left of col-md-  in Bootstrap 3   HTML code    lt div class  col-md-12  gt       lt h2 gt OntoExplorer lt span style  color  b92429  gt   lt  span gt  lt  h2 gt        lt div class  col-md-4  gt           lt div class  widget  gt               lt div class  widget-header  gt                   lt h3 gt Dimensions lt  h3 gt               lt  div gt                lt div class  widget-content  id    gt                   lt div id  jqxWidget  gt                       lt div style  clear both margin-bottom 20px   id  listBoxA  gt  lt  div gt                       lt div style  clear both   id  listBoxB  gt  lt  div gt                    lt  div gt               lt  div gt           lt  div gt       lt  div gt        lt div class  col-md-8  gt           lt div class  widget  gt               lt div class  widget-header  gt                   lt h3 gt Results lt  h3 gt               lt  div gt                lt div class  widget-content  gt                   lt div id  map canvas  style  height  362px   gt  lt  div gt               lt  div gt           lt  div gt       lt  div gt    lt  div gt    Desired output   Currently this code adds padding margin to the right and left of the two columns  I am wondering what it is I am missing in order to remove this extra space on the sides   Notice   If I remove  col-md-4  then both columns expand to 100  but I want them to be next to each other

User · Answer

Building up on Vitaliy Silin s answer  Covering not only cases where we do not want padding at all  but also cases where we have standard size paddings   See the live conversion of this code to CSS on sassmeister com    mixin padding  side   size         padding-size   0       if  size     xs     padding-size   5px         else if  size     s     padding-size   10px         else if  size     m     padding-size   15px         else if  size     l     padding-size   20px          if  side     all             padding--   size                padding   padding-size  important                   else            padding-   side --   size                padding-   side    padding-size  important                      sides-list  all top right bottom left   sizes-list  none xs s m l   each  current-side in  sides-list      each  current-size in  sizes-list        include padding  current-side  current-size           This then outputs    padding--none     padding  0  important      padding--xs     padding  5px  important      padding--s     padding  10px  important      padding--m     padding  15px  important      padding--l     padding  20px  important      padding-top--none     padding-top  0  important      padding-top--xs     padding-top  5px  important      padding-top--s     padding-top  10px  important      padding-top--m     padding-top  15px  important      padding-top--l     padding-top  20px  important      padding-right--none     padding-right  0  important      padding-right--xs     padding-right  5px  important      padding-right--s     padding-right  10px  important      padding-right--m     padding-right  15px  important      padding-right--l     padding-right  20px  important      padding-bottom--none     padding-bottom  0  important      padding-bottom--xs     padding-bottom  5px  important      padding-bottom--s     padding-bottom  10px  important      padding-bottom--m     padding-bottom  15px  important      padding-bottom--l     padding-bottom  20px  important      padding-left--none     padding-left  0  important      padding-left--xs     padding-left  5px  important      padding-left--s     padding-left  10px  important      padding-left--m     padding-left  15px  important      padding-left--l     padding-left  20px  important

User · Answer

class   col-     padding  0   margin  0

User · Answer

None of the above solutions worked perfectly for me  Following this answer I was able to create something that works for me  Here I am also using a media query to limit this to small screens only    media  max-width   screen-sm         class   col-           padding-left  0        padding-right  0             row         margin-left  0        margin-right  0             container-fluid         margin  0        padding  0

User · Answer

Remove spacing from b w columns using bootstrap 3 7 7 or less        no-gutter is a custom class that you can add to your row DIVs    no-gutter  gt   class   col-             padding-right 0          padding-left 0

User · Answer

Bootstrap 4 has the class  no-gutters that you can add to the row element     lt div class  container-fluid  gt       lt div class  row no-gutters  gt           lt div class  col-md-12  gt               YOUR CONTENT HERE           lt  div gt       lt  div gt   lt  div gt    Reference  http   getbootstrap com docs 4 0 layout grid  grid-options

User · Answer

Reducing just the padding on the columns won t make the trick  as you will extend the width of the page  making it uneven with the rest of your page  say navbar  You need to equally reduce the negative margin on the row  Taking  martinedwards  LESS example    row-no-padding     margin-left  0    margin-right  0     class   col-         padding-left  0  important      padding-right  0  important

User · Answer

lt style gt   col-md-12   padding-left 0px  important  padding-right 0px  important     col-md-8  padding-left 0px  important  padding-right 0px  important     col-md-4  padding-left 0px  important  padding-right 0px  important     lt  style gt

User · Answer

I guess it s easier to just use   margin -30px    to override the original value set by bootstrap   I ve tried   margin  0px -30px 0px -30px    and it worked for me

User · Answer

Bootstrap 3  since version 3 4 0  has an official way of removing the padding  the class row-no-gutters   Example from the documentation     lt div class  row row-no-gutters  gt     lt div class  col-xs-12 col-md-8  gt  col-xs-12  col-md-8 lt  div gt     lt div class  col-xs-6 col-md-4  gt  col-xs-6  col-md-4 lt  div gt   lt  div gt   lt div class  row row-no-gutters  gt     lt div class  col-xs-6 col-md-4  gt  col-xs-6  col-md-4 lt  div gt     lt div class  col-xs-6 col-md-4  gt  col-xs-6  col-md-4 lt  div gt     lt div class  col-xs-6 col-md-4  gt  col-xs-6  col-md-4 lt  div gt   lt  div gt   lt div class  row row-no-gutters  gt     lt div class  col-xs-6  gt  col-xs-6 lt  div gt     lt div class  col-xs-6  gt  col-xs-6 lt  div gt   lt  div gt

User · Answer

I still prefer to have control over every padding in every screen size so this css might be usefull to You guys      nopadding-lg       padding-left  0 important      padding-right  0 important     nopadding-left-lg  padding-left  0 important    nopadding-right-lg  padding-right  0 important     media  max-width  576px         nopadding-xs           padding-left  0 important          padding-right  0 important             nopadding-left-xs  padding-left  0 important        nopadding-right-xs  padding-right  0 important       media  max-width  768px         nopadding-sm           padding-left  0 important          padding-right  0 important             nopadding-left-sm  padding-left  0 important        nopadding-right-sm  padding-right  0 important      media  max-width  992px         nopadding-md           padding-left  0 important          padding-right  0 important             nopadding-left-md  padding-left  0 important        nopadding-right-md  padding-right  0 important

User · Answer

Bootstrap 4 has added  no-gutters class  Bootstrap 3 4 has added  row-no-gutters class Bootstrap 3  I always add this style to my Bootstrap LESS   SASS   row-no-padding      class   quot col- quot         padding-left  0  important      padding-right  0  important         Then in the HTML you can write   lt div class  quot row row-no-padding quot  gt   If you want to only target the child columns you can use the child selector  Thanks John Wu    row-no-padding  gt   class   quot col- quot         padding-left  0  important      padding-right  0  important     You may also want to remove padding only for certain device sizes  SASS example      Small devices  tablets  768px and up      media  min-width   screen-sm-min  and  max-width   screen-sm-max       row-sm-no-padding        class   quot col- quot           padding-left  0  important        padding-right  0  important               You can remove the max-width part of the media query if you want it to support small devices upwards

User · Answer

you can use fork   https   github com srghma bootstrap-rubygem-without-gutter commit 8e42c16dcc2f132af3489c2275dd7460b524d437  gem  bootstrap   github   srghma bootstrap-rubygem-without-gutter

User · Answer

lt div class  col-md-12  gt   lt h2 gt OntoExplorer lt span style  color  b92429  gt   lt  span gt  lt  h2 gt    lt div class  col-md-4  gt       lt div class  widget row  gt           lt div class  widget-header  gt               lt h3 gt Dimensions lt  h3 gt           lt  div gt            lt div class  widget-content  id    gt               lt div id  jqxWidget  gt                   lt div style  clear both margin-bottom 20px   id  listBoxA  gt  lt  div gt                   lt div style  clear both   id  listBoxB  gt  lt  div gt                lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt div class  col-md-8  gt       lt div class  widget row  gt           lt div class  widget-header  gt               lt h3 gt Results lt  h3 gt           lt  div gt            lt div class  widget-content  gt               lt div id  map canvas  style  height  362px   gt  lt  div gt           lt  div gt       lt  div gt   lt  div gt      You can add a class of row to the div inside the col-md-4 and the row s -15px margin will balance out the gutter from the columns   Good explanation here about gutters and rows in Bootstrap 3

User · Answer

Another solution  feasible only if you compile bootstrap from its LESS sources  is to redefine the variable which sets the padding for the columns   You will find the variable in the variables less file  it s called  grid-gutter-width   It s described like this in the sources        Padding between columns  Gets divided in half for the left and right   grid-gutter-width          30px    Set this to 0  compile bootstrap less  and include the resulting bootstrap css  You are done  It can be an alternative to defining an additional rule  if you are already using bootstrap sources like I am

User · Answer

You can create a new class for removing margin and can apply to the element where you want to remove extra margin    margL0   margin-left 0  important      important   it will help you to remove the default margin or overwrite the current margin value   and apply to that div from in which you want to remove the margin from left side

User · Answer

Hereafter only available at Bootstrap4   lt div class  p-0 m-0  gt   lt  div gt    note   p-0 and  m-0 already added bootstrap css

User · Answer

Specifically for SASS mixin    mixin no-padding  side         if  side     all             no-padding               padding  0  important                   else            no-padding-   side                padding-   side   0  important                      include no-padding  left     include no-padding  right     include no-padding  top     include no-padding  bottom     include no-padding  all      Then in HTML  you can use    no-padding-left  no-padding-right  no-padding-bottom  no-padding-top  no-padding - to remove padding from all sides   Sure  you can  include only those declarations  which you need

User · Answer

Bootstrap 4 has a native class to do this   add the class  no-gutters to the parent  row

User · Answer

You can customize your Bootstrap Grid system and define your custom responsive grid   change your default values for the following gutter width from  grid-gutter-width   30px to  grid-gutter-width   0px   Gutter width is padding between columns  It gets divided in half for the left and right

User · Answer

If you download bootstrap with the SASS files you will be able to edit the config file where there are a setting for the margin of the columns and then save it  in that way the SASS calculates the new width of the columns

User · Answer

You can create Less Mixins using bootstrap for manage margins and paddings of your columns like   http   mohandere work less-mixins-for-margin-and-padding-with-bootstrap-3   Usage    xs-padding-lr-15px  left right both xs-padding-l-15px  xs-padding-r-15px   Similarly for setting margin padding  zero you can use   xs-padding-lr-0px xs-padding-l-0px xs-padding-r-0px

User · Answer

You d normally use  row to wrap two columns  not  col-md-12 - that s a column encasing another column  Afterall   row doesn t have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left  amp  right margins     lt div class  container  gt       lt div class  row  gt           lt h2 gt OntoExplorer lt span style  color  b92429  gt   lt  span gt  lt  h2 gt            lt div class  col-md-4 nopadding  gt               lt div class  widget  gt                   lt div class  widget-header  gt                       lt h3 gt Dimensions lt  h3 gt                   lt  div gt                   lt div class  widget-content  gt                   lt  div gt               lt  div gt           lt  div gt            lt div class  col-md-8 nopadding  gt               lt div class  widget  gt                   lt div class  widget-header  gt                       lt h3 gt Results lt  h3 gt                   lt  div gt                   lt div class  widget-content  gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    if you really wanted to remove the padding margins  add a class to filter out the margins paddings for each child column     nopadding      padding  0  important     margin  0  important

User · Answer

simply Add  no-padding  which  is inbuilt class in bootstrap 3

User · Answer

Sometimes you might lose the padding that you want for the columns  They end up sticking to each other  To prevent that  you could update the class as follows    lt div class  col-md-3 NoPaddingForChildren  gt           lt div class  col-md-6  gt                       lt label gt Id lt  label gt                       lt input ng-model  ID  class  form-control  gt           lt  div gt           lt div class  col-md-6  gt                       lt label gt Value lt  label gt                       lt input ng-model  Val  class  form-control  gt           lt  div gt   lt  div gt    and corresponding class    NoPaddingForChildren  gt  div not  first-child  not  last-child        padding-left  0      padding-right  0      NoPaddingForChildren  gt  div first-child       padding-left  0      NoPaddingForChildren  gt  div last-child           padding-right  0

User · Answer

Remove customize Bootstrap Gutter with css reference  http   arnique net web-design 58 a-quick-guide-to-changing-bootstraps-gutter-width    x000D   x000D     remove    x000D   gutter-0 row   x000D    margin-right  -0px  x000D    margin-left  -0px  x000D    x000D   gutter-0  gt   class   col-     gutter-0  gt   class    col-     x000D    padding-right  0px  x000D    padding-left  0px  x000D    x000D   x000D     customize    x000D   gutter-6 row   x000D    margin-right  -3px  x000D    margin-left  -3px  x000D    x000D   gutter-6  gt   class   col-     gutter-6  gt   class    col-     x000D    padding-right  3px  x000D    padding-left  3px  x000D    x000D       x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  row gutter-6  gt  x000D     lt div class  col-sm-3 col-md-3  gt  x000D       lt div class  thumbnail  gt  x000D         lt img width  100   src  data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0 PC9zdHlsZT48L2RlZnM PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI MTcxeDE4MDwvdGV4dD48L2c PC9nPjwvc3ZnPg    alt    gt  x000D         lt div class  caption  gt  x000D           lt h3 gt Thumbnail label lt  h3 gt  x000D           lt p gt more lt  p gt  x000D           lt p gt  lt a href     class  btn btn-primary  role  button  gt Button lt  a gt   lt a href     class  btn btn-default  role  button  gt Button lt  a gt  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-3 col-md-3  gt  x000D       lt div class  thumbnail  gt  x000D         lt img width  100   src  data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0 PC9zdHlsZT48L2RlZnM PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI MTcxeDE4MDwvdGV4dD48L2c PC9nPjwvc3ZnPg    alt    gt  x000D         lt div class  caption  gt  x000D           lt h3 gt Thumbnail label lt  h3 gt  x000D           lt p gt more lt  p gt  x000D           lt p gt  lt a href     class  btn btn-primary  role  button  gt Button lt  a gt   lt a href     class  btn btn-default  role  button  gt Button lt  a gt  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-3 col-md-3  gt  x000D       lt div class  thumbnail  gt  x000D         lt img width  100   src  data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0 PC9zdHlsZT48L2RlZnM PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI MTcxeDE4MDwvdGV4dD48L2c PC9nPjwvc3ZnPg    alt    gt  x000D         lt div class  caption  gt  x000D           lt h3 gt Thumbnail label lt  h3 gt  x000D           lt p gt more lt  p gt  x000D           lt p gt  lt a href     class  btn btn-primary  role  button  gt Button lt  a gt   lt a href     class  btn btn-default  role  button  gt Button lt  a gt  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-3 col-md-3  gt  x000D       lt div class  thumbnail  gt  x000D         lt img width  100   src  data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0 PC9zdHlsZT48L2RlZnM PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI MTcxeDE4MDwvdGV4dD48L2c PC9nPjwvc3ZnPg    alt    gt  x000D         lt div class  caption  gt  x000D           lt h3 gt Thumbnail label lt  h3 gt  x000D           lt p gt more lt  p gt  x000D           lt p gt  lt a href     class  btn btn-primary  role  button  gt Button lt  a gt   lt a href     class  btn btn-default  role  button  gt Button lt  a gt  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Wrap your columns in a  row and add to that div a class called  no-gutter    lt div class  container  gt     lt div class  row no-gutter  gt       lt h2 gt OntoExplorer lt span style  color  b92429  gt   lt  span gt  lt  h2 gt        lt div class  col-md-4  gt           lt div class  widget  gt               lt div class  widget-header  gt                   lt h3 gt Dimensions lt  h3 gt               lt  div gt               lt div class  widget-content  gt               lt  div gt           lt  div gt       lt  div gt        lt div class  col-md-8  gt           lt div class  widget  gt               lt div class  widget-header  gt                   lt h3 gt Results lt  h3 gt               lt  div gt               lt div class  widget-content  gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt      Then paste below contents to your CSS file   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

[css] Remove padding from columns in Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap

Examples related to html