Search code examples
twitter-bootstrapbordergutter

Borders between columns of Bootstrap Grid not working

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.

Solution

  • 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