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.

I'm not seeing anything in your code snippet. Also, your html does not include the class cliente — Macsupport, Sep 29 '14 at 16:50
Mauro, you forgot the class .cliente, take a look at Skelly's answer, it's correct. And obviously, if you want side borders, you just use border-left, or border-right, but that's essentially the gist of it — Devin, Sep 29 '14 at 17:37

Carol Skelly · Accepted Answer · 2017-05-19T15:33:14.160

24

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

edited May 19 '17 at 15:33

answered Sep 29 '14 at 17:11

Carol Skelly

351,302
90
710
624

1

Thanks Skelly! I forgot to use a div inside the column! – Mauro Barrionuevo Sep 29 '14 at 19:55

score 7 · Answer 2 · edited Mar 23 '17 at 09:36

7

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

edited Mar 23 '17 at 09:36

Hakan Fıstık

16,800
14
110
131

answered Mar 14 '15 at 18:46

Carlos Macias

71
1
3

score 2 · Answer 3 · answered May 26 '17 at 19:30

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.

Borders between columns of Bootstrap Grid not working

3 Answers3

Linked

Related