bootstrap columns won't create spaces between them no matter what I try, is it my html structure? - html

Question

I have searched through almost every question asked about spacing between bootstrap columns but nothing seems to work. I'm thinking it could be a simple rookie mistake with the way I have structured my html/css but I can't seem to figure it out.
I've worked with bootstrap many times before but using a theme, this is my first time however only using a simple bootstrap navbar template with nothing else inside.
.img-container{
position: relative;
display: inline-block;
}
.img-container .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
}
.img-container:hover .overlay{
display: block;
background-color: rgba(0,0,0,0.6);
}
.img-container .overlay .services-caption{
color: #fff;
font-size: 100px;
position: absolute;
top: 25%;
left: 20%;
}
<!--Services-->
<section class="services">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

Add bootstrap col-md-offset-* class to achieve spacing between columns.
<div class="col-md-4 col-md-offset-1">
The above code will create a gap of 1 column size.

Answer 2

You can try padding, put test class on each <div class="col-md-4 test">
<style>
.test {
padding-bottom: 10px;
}
</style>
<div class="col-md-4 test">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>

Answer 3

You can add a class called img-responsive. It will make the image responsively.
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" class="img-responsive" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>