Borders between Bootstrap grid columns not working

Question

I create a page in bootstrap where I use 4 columns 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 added a class for each column so that everyone can 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 a natural bootstrap mesh groove, and this does not work.

could you help me? Thank you

Answer 1

You need to use another block element (i.e., DIV) inside the columns, since Bootstrap 'col * * uses the padding to create a 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 the outline property. NO cliente div.

 .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 made a version that does not require additional elements, but can have unequal heights:

How to add a row between two columns using Twitter Bootstraps grid

Answer 4

To expand the outline solution if you want the border to shrink to the same size if two adjacent columns have borders, use box-shadow :

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

The drawback of box-shadow compared to outline is that box-shadow can be displayed by any browser at the subpixel position, while the outlines and borders are snapped to the nearest pixel. If a box-shadow falls into a subpixel position, it will look soft or blurry. The only way to avoid this is to make sure that you are not doing something that will align the column at the subpixel position.