maudulus maudulus - 2 months ago 14
CSS Question

Bootstrap Add Space between Columns

I have closely followed the most popular example of how to add space between columns, but it doesn't work. You can view it in action at

http://codepen.io/maudulus/pen/ozxbNB

What I've done is put a

col-sm-12
inside of a
col-sm-4
for each column. According to the most popular answer here this should automatically render some space between the 2 divs.

HTML:

<div class="row blocks-grid">
<div class="col-xs-6 col-sm-4 item">
<div class="col-sm-12">
<img src="http://example.com/1MBVDF4">
<h2>This is me</h2>
</div>
</div>

<div class="col-xs-6 col-sm-4 item">
<div class="col-sm-12">
<img src="http://example.com/1MBVDF4">
<h2>This is me</h2>
</div>
</div>

<div class="col-xs-6 col-sm-4 item">
<div class="col-sm-12">
<img src="http://example.com/1MBVDF4">
<h2>This is me</h2>
</div>
</div>
</div>


CSS:

body {
background: #BEB7A4;
}
.blocks-grid {
max-width:75.0rem;
margin:0 auto;
.item {
cursor: pointer;
margin-bottom:1rem;
position:relative;
height:34.0rem;
padding-top:2.5rem;
background:#FFFFFC;
&:hover {
background:#FF0000;
color:white;
img {
display:none;
}
}
h2 {
font-size:2.0rem;
margin-top:1rem;
text-align: center;
}
img {
max-width: 100%;
margin:auto;
display:block;
}
}
}


Basically, I would think the result would look like the following photo, but it does not:

enter image description here

Answer

you can try this: Demo

Add your "item" class with "col-sm-12"

body {
  background: #BEB7A4;
}