How do I add a margin between bootstrap columns without wrapping

Question

My layout currently looks like this    In the center column  I want to add a small margin between each Server Div  But  if I add a margin to the CSS  it ends up line wrapping and looking like this     lt div class  row info-panel  gt       lt div class  col-md-4 server-action-menu  id  server 1  gt           lt div gt              Server 1          lt  div gt       lt  div gt       lt div class  col-md-4 server-action-menu  id  server 2  gt           lt div gt              Server 2          lt  div gt       lt  div gt       lt div class  col-md-4 server-action-menu  id  server 3  gt           lt div gt              Server 3          lt  div gt       lt  div gt       lt div class  col-md-4 server-action-menu  id  server 4  gt           lt div gt              Server 4          lt  div gt       lt  div gt       lt div class  col-md-4 server-action-menu  id  server 5  gt           lt div gt              Server 5          lt  div gt       lt  div gt       lt div class  col-md-4 server-action-menu  id  server 6  gt           lt div gt              Server 6          lt  div gt       lt  div gt       lt div class  col-md-4 server-action-menu  id  server 7  gt           lt div gt              Server 7          lt  div gt       lt  div gt   lt  div gt    And the CSS    server-action-menu       background-color  transparent      background-image  linear-gradient to bottom  rgba 30  87  153  0 2  0   rgba 125  185  232  0  100        background-repeat  repeat      border-radius 10px      info-panel       padding  4px      I attempted to add the margins by doing this   info-panel   gt  div       margin  4px          How can I add a margin to the DIVs so that they don t leave so much space on the right hand side

User · Answer

Change the number of  grid-columns  Then use -offset  Changing the number of columns will allow you to control the amount of space between columns  E g    variables less  approx line 294     grid-columns               20    someName html   lt div class  row  gt     lt div class  col-md-4 col-md-offset-1  gt First column lt  div gt     lt div class  col-md-13 col-md-offset-1  gt Second column lt  div gt   lt  div gt

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

The simple way to do this is doing a div within a div   x000D   x000D   lt div class  col-sm-4  style  padding  5px border 2px solid red   gt  x000D      lt div class  server-action-menu  id  server 1  gt Server 1 x000D      lt  div gt  x000D    lt  div gt  x000D   lt div class  col-sm-4  style  padding  5px border 2px solid red   gt  x000D      lt div class  server-action-menu  id  server 1  gt Server 2 x000D      lt  div gt  x000D    lt  div gt  x000D   lt div class  col-sm-4  style  padding  5px border 2px solid red   gt  x000D      lt div class  server-action-menu  id  server 1  gt Server 3 x000D      lt  div gt  x000D    lt  div gt  x000D   x000D   x000D

User · Answer

If you do not need to add a border on columns  you can also simply add a transparent border on them    class   col-         background-clip  padding-box      border  10px solid transparent

User · Answer

You should work with padding on the inner container rather than with margin  Try this   HTML    lt div class  row info-panel  gt       lt div class  col-md-4  id  server 1  gt          lt div class  server-action-menu  gt             Server 1         lt  div gt      lt  div gt   lt  div gt    CSS   server-action-menu       background-color  transparent      background-image  linear-gradient to bottom  rgba 30  87  153  0 2  0   rgba 125  185  232  0  100        background-repeat  repeat      border-radius 10px      padding  5px

[html] How do I add a margin between bootstrap columns without wrapping

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3