Menu
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.
641
In order to make Bootstrap columns work together, you need to make sure that you have correctly imported and required the CSS file containing styles for row and col classes. Otherwise, your Bootstrap rows and columns will act like regular <div> without the required styles to support their intended structure.
To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
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
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
