Bootstrap Add Space between Columns - html

Question

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
codepen.io
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:

Answer 1

you can try this: Demo
Add your "item" class with "col-sm-12"
body {
background: #BEB7A4;
}

Answer 2

I made some changes on your code.
HTML
Note the subitem class added to col-sm-12 divs.
<div class="row blocks-grid">
<div class="col-sm-4 item">
<div class="col-sm-12 subitem">
<img src="image_url">
<h2>This is me</h2>
</div>
</div>
<div class="col-sm-4 item">
<div class="col-sm-12 subitem">
<img src="image_url">
<h2>This is me</h2>
</div>
</div>
<div class="col-sm-4 item">
<div class="col-sm-12 subitem">
<img src="image_url">
<h2>This is me</h2>
</div>
</div>
</div>
LESS
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;
.subitem {
background:#FFFFFC;
height: 100%;
padding-top: 50px;
&: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;
}
}
}
}
Take a look: http://codepen.io/anon/pen/KgzVRK
Hope it can helps you.

Answer 3

You can actually remove all the extra junk and let bootstrap do it for you... NEVER change margins / widths on the framework. This is all you need....
HTML
<div class="row">
<div class="col-xs-6 col-sm-4">
<img src="http://placehold.it/350x250">
<h2>This is me</h2>
</div>
<div class="col-xs-6 col-sm-4">
<img src="http://placehold.it/350x150">
<h2>This is me</h2>
</div>
<div class="col-xs-6 col-sm-4">
<img src="http://placehold.it/350x150">
<h2>This is me</h2>
</div>
</div>
CSS
img { width: 100%; }

Answer 4

You may try to move the class item from col-xs-6 to col-sm-12
The snippet:
body {
background: #BEB7A4;
}
.blocks-grid {
max-width: 75.0rem;
margin: 0 auto;
}
.blocks-grid .item {
cursor: pointer;
margin-bottom: 1rem;
position: relative;
height: 34.0rem;
padding-top: 2.5rem;
background: #FFFFFC;
}
.blocks-grid .item:hover {
background: #FF0000;
color: white;
}
.blocks-grid .item:hover img {
display: none;
}
.blocks-grid .item h2 {
font-size: 2.0rem;
margin-top: 1rem;
text-align: center;
}
.blocks-grid .item img {
max-width: 100%;
margin: auto;
display: block;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
background: #BEB7A4;
}
.blocks-grid {
max-width: 75.0rem;
margin: 0 auto;
}
.blocks-grid .item {
cursor: pointer;
margin-bottom: 1rem;
position: relative;
height: 34.0rem;
padding-top: 2.5rem;
background: #FFFFFC;
}
.blocks-grid .item:hover {
background: #FF0000;
color: white;
}
.blocks-grid .item:hover img {
display: none;
}
.blocks-grid .item h2 {
font-size: 2.0rem;
margin-top: 1rem;
text-align: center;
}
.blocks-grid .item img {
max-width: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="row blocks-grid">
<div class="col-xs-6 col-sm-4">
<div class="col-sm-12 item">
<img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">
<h2>This is me</h2>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-sm-12 item">
<img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">
<h2>This is me</h2>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-sm-12 item">
<img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">
<h2>This is me</h2>
</div>
</div>
</div>
</body>