178

My layout currently looks like this

Current Layout

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

Attempted Change

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

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  > 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?

Ajay Gupta
  • 2,867
  • 23
  • 28
Andy
  • 49,085
  • 60
  • 166
  • 233

5 Answers5

201

You should work with padding on the inner container rather than with margin. Try this!

HTML 

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

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;
}
Charles Ingalls
  • 4,521
  • 5
  • 25
  • 33
83

I was facing the same issue; and the following worked well for me:

<div class="row">
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
</div>

This will automatically render some space between the 2 divs. enter image description here

starball
  • 20,030
  • 7
  • 43
  • 238
krishna kinnera
  • 1,543
  • 12
  • 10
  • 4
    This works great, especially when background colours matter. Also mentioned in [this answer](https://stackoverflow.com/a/29576362/1998086). – Leo Nov 12 '17 at 23:48
  • 4
    But column directly inside a column is a bad practice, right? – Jovis Joseph Nov 26 '18 at 06:33
  • This is a bad practice, I don't recommend that solution. Especially, this is not a better solution than a container div with class px-X – Loenix Feb 16 '21 at 07:58
  • A container with px doesn't solve the problem as it fundamentally changes bkg colors and borders. – Midiman Mar 10 '23 at 11:38
65

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;
}
Seb33300
  • 7,464
  • 2
  • 40
  • 57
  • 6
    Nice trick, and if you can't use background-clip: padding-box (it's CSS3), set borders with the same color of your page background ;) – Frank Sep 04 '15 at 22:25
  • Love this solution. – hugger Sep 26 '19 at 14:28
  • 1
    issue with this solution is it breaks all the other cols in the page that don't need the space – Pablo Pazos Apr 18 '20 at 01:47
  • @PabloPazos of course, the solution need to be adapted to your own case. Just replace the generic `[class*="col-"]` by another selector to target the columns where you want to add margins. – Seb33300 Apr 19 '20 at 10:18
  • 1
    Changing the behavior of column in CSS is also a bad practice. Don't do that ! – Loenix Feb 16 '21 at 07:59
25

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

<div class="row">
  <div class="col-md-4 col-md-offset-1">First column</div>
  <div class="col-md-13 col-md-offset-1">Second column</div>
</div>
Shaun Luttin
  • 133,272
  • 81
  • 405
  • 467
  • 3
    @ShaunLuttin instead of adding offset classes to all of your divs of all of your templates in order to make margin, isn't there a more global solution? Have the same problem over at http://stackoverflow.com/questions/26016396/add-gutter-margin-between-bootstrap-columns/26016735#26016735 but adding offset classes everywhere isn't really maintainable .. – George Katsanos Sep 24 '14 at 12:54
  • @GeorgeKatsanos You could use the `.make-md-column-offset()` mixin to do it. Also, consider playing with the `@grid-gutter-width` variable. – Shaun Luttin Sep 24 '14 at 22:14
6

The simple way to do this is doing a div within a div

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 1
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 2
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 3
   </div>
 </div>
Ricardo Flores
  • 69
  • 1
  • 3