What is the best way to create a margin between bootstrap columns without wrapping them [duplicate]?

Problem

This is how my current design appears.

I’d want to add a small margin between each Server Div in the center column. However, if I include a margin in the CSS, it will line wrap and appear like this.

<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;
}

This is how I attempted to add the margins.

.info-panel  > div {
    margin: 4px;    
}

How can I give the DIVs a margin so that they don’t take up so much room on the right side?

Asked by Andy

Solution #1

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;
}

Answered by Charles Ingalls

Solution #2

I had the similar problem and found that the following worked nicely for me. I hope this information is useful to someone who has arrived here:

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

The space between the two divs will be rendered automatically as a result of this.

Answered by krishna kinnera

Solution #3

If you don’t require a border on your columns, you can just use a translucent border instead:

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}

Answered by Seb33300

Solution #4

Increase or decrease the amount of @grid-columns. Then use the -offset option. You may vary the amount of space between columns by changing the number of columns. E.g.

less variables (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>

Answered by Shaun Luttin

Solution #5

A div within a div is an easy way to accomplish this.

Answered by Ricardo Flores

Post is based on https://stackoverflow.com/questions/19010845/how-do-i-add-a-margin-between-bootstrap-columns-without-wrapping