Borders between columns of Bootstrap Grid not working

Question

I'm creating a page in bootstrap where I'm using 4 cols inside a row. The code:

<div class="row text-center">
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
</div>

I've added a class to each col so each could have a border.

.cliente {
    margin-top:10px;
    border: #cdcdcd medium solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

The problem is that the borders should be separated by the natural gutter of the bootstrap grid and that is not working.

Could you help me please? Thanks.

Answer 1

You need to use another block element (ie; DIV) inside the columns since Bootstrap 'col-*' uses padding to create the spacing or "gutter" between the grid columns.

 <div class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

Demo: http://www.bootply.com/71ZVOWCFWu

Answer 2

You can use outline property. NO cliente div is needed.

.row > div {
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 }

Answer 3

I did a version which doesn't require extra elements, but might suffer from unequal heights:

How can I add a line between two columns using Twitter Bootstraps grid system

Answer 4

To expand on the outline solution, if you want a border that collapses to the same size if two adjacent columns both have borders, use box-shadow:

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

The downside to box-shadow versus outline is that box-shadow may be rendered by any browser at a subpixel position, whereas outlines and borders snap to the nearest pixel. If a box-shadow ends up on a subpixel position, it will appear soft or blurred. The only way to avoid this is to ensure you don't do things that will cause the column to be aligned on a subpixel position.