Bootstrap add margin padding space between columns

Question

I m trying to put some extra margin padding space between columns on my Bootstrap grid layout  I ve tried this but I don t like the result  Here is my code        lt div class  row  gt           lt div class  text-center col-md-6  gt              Widget 1          lt  div gt           lt div class  text-center col-md-6  gt              Widget 2          lt  div gt       lt  div gt    I want to add margin  10px and padding 10px  Some people suggest to change their classes to col-md-5 with pull-left and pull-right  but the gap between them will be too large

User · Answer

Simply add a div within col-md-6 that has the extra padding that you need   The col-md-6 is the  backbone  to keep the column integrity  but you can add additional padding within it    lt div class  row  gt       lt div class  text-center col-md-6  gt           lt div class  classWithPad  gt Widget 1 lt  div gt       lt  div gt       lt div class  text-center col-md-6  gt           lt div class  classWithPad  gt Widget 2 lt  div gt       lt  div gt   lt  div gt    CSS   classWithPad   margin 10px  padding 10px

User · Answer

Just add  justify-content-around  class  that would automatically add gap between 2 divs   Documentation  https   getbootstrap com docs 4 1 layout grid  horizontal-alignment  Sample    lt div class  row justify-content-around  gt       lt div class  col-4  gt        One of two columns      lt  div gt       lt div class  col-4  gt        One of two columns      lt  div gt   lt  div gt

User · Answer

Update 2018  Bootstrap 4 now has spacing utilities that make adding  or substracting  the space  gutter  between columns easier  Extra CSS isn t necessary    lt div class  row  gt       lt div class  text-center col-md-6  gt           lt div class  mr-2  gt Widget 1 lt  div gt       lt  div gt       lt div class  text-center col-md-6  gt           lt div class  ml-2  gt Widget 2 lt  div gt       lt  div gt   lt  div gt    You can adjust margins on the column contents using the margin utils such as ml-0  margin-left 0   mr-0  margin-right 0   mx-1   25rem left  amp  right margins   etc     Or  you can adjust padding on the columns  col-   using the padding utils such as pl-0  padding-left 0   pr-0  padding-right 0   px-2   50rem left  amp  right padding   etc     Bootstrap 4 Column Spacing Demo  Notes   Changing the left right margin s  on col-  will break the grid  Change the left right margin s  on the content of  col-  works  Change the left right padding on the col-  also works

User · Answer

I would keep an extra column in the middle for larger displays and reset to default when the columns collapse on smaller displays  Something like this        lt div class  row  gt           lt div class  text-center col-md-5 col-sm-6  gt              Widget 1          lt  div gt           lt div class  col-md-2  gt               lt  -- Gap between columns -- gt           lt  div gt           lt div class  text-center col-md-5 col-sm-6  gt              Widget 2          lt  div gt       lt  div gt

User · Answer

For the more curious  I have also found that adding  border  5px solid white   or any other variant of your liking  to make it blend in  works superbly

User · Answer

Super easy with flexbox  Leave room for some space by changing the columns to col-md-5       lt div class  row widgets  gt       lt div class  text-center col-md-5  gt          Widget 1      lt  div gt       lt div class  text-center col-md-5  gt          Widget 2      lt  div gt   lt  div gt    CSS   widgets       display  flex      justify-content  space-around

User · Answer

Try This     lt div class  row  gt       lt div class  text-center col-md-6  gt          lt div class  col-md-12  gt             Widget 1         lt  div gt       lt  div gt       lt div class  text-center col-md-6  gt           lt div class  col-md-12  gt             Widget 2          lt  div gt       lt  div gt   lt  div gt

User · Answer

For those looking to control the space between a dynamic number of columns  try    lt div class  row no-gutters  gt       lt div class  col  gt           lt div class  inner  gt               lt  -- content here -- gt           lt  div gt       lt  div gt       lt div class  col  gt           lt div class  inner  gt               lt  -- content here -- gt           lt  div gt       lt  div gt       lt  -- etc  -- gt   lt  div gt    CSS    col not  last-child   inner     margin  2px     Or whatever you want your spacing to be

User · Answer

You may use the padding and margin shorthand Bootstrap 4 classes as follows   For extra small devices i e  xs   property  sides - size    For other devices viewports  small  medium  large and extra large    property  sides - breakpoint - size    Where   property   m for margin and p for padding   Following are sides shorthand meanings   l   defines the left-margin or left-padding r   defines the right-margin or right-padding t   defines the top-margin or top-padding b   defines the bottom-margin or right-padding x   For setting left and right padding and margins by the single call y   For setting top and bottom margins blank   margin and padding for all sides   The breakpoint   sm  md  lg  and xl   Combining all the above  the left padding complete code can be  for example    For left padding in extra small devices  pl-2  or for medium to extra large  pl-md-2

User · Answer

I had the same issue and worked it out by nesting a div inside bootstrap col and adding padding to it  Something like    lt div class  container  gt    lt div class  row  gt     lt div class  col-md-4  gt      lt div class  custom-box  gt Your content with padding lt  div gt     lt  div gt     lt div class  col-md-4  gt      lt div class  custom-box  gt Your content with padding lt  div gt     lt  div gt     lt div class  col-md-4  gt      lt div class  custom-box  gt Your content with padding lt  div gt     lt  div gt    lt  div gt   lt  div gt

User · Answer

In the otherside if you like to remove double padding between columns just add class  nogap  inside row   lt div class  row nogap  gt       lt div class  text-center col-md-6  gt Widget 1 lt  div gt       lt div class  text-center col-md-6  gt Widget 2 lt  div gt   lt  div gt    and create additional css class for it   nogap  gt   col  padding-left 7 5px  padding-right  7 5px   nogap  gt   col first-child  padding-left  15px     nogap  gt   col last-child  padding-right  15px      Thats it  check here  https   codepen io michal-lukasik pen xXvoYJ

User · Answer

I was facing the same issue  and the following worked well for me  Hope this helps someone landing here    lt div class  row  gt     lt div class  col-md-6  gt       lt div class  col-md-12  gt       Set room heater temperature     lt  div gt    lt  div gt    lt div class  col-md-6  gt      lt div class  col-md-12  gt       Set room heater temperature     lt  div gt    lt  div gt   lt  div gt      This will automatically render some space between the 2 divs

User · Answer

Try this    lt div class  row  gt         lt div class  col-md-5  gt           Set room heater temperature       lt  div gt        lt div class  col-md-2  gt  lt  div gt        lt div class  col-md-5  gt           Set room heater temperature       lt  div gt   lt  div gt

User · Answer

A solution for someone like me when cells got background color  HTML   lt div class  row  gt           lt div class  col-6 cssBox  gt              a lt br   gt ba lt br   gt ba lt br   gt b          lt  div gt           lt div class  col-6 cssBox  gt              a lt br   gt b          lt  div gt   lt  div gt    CSS   cssBox     background-color  red    margin  0 10px    flex-basis  calc 50  - 20px

[html] Bootstrap: add margin/padding space between columns

Examples related to html

Examples related to css

Examples related to twitter-bootstrap