Bootstrap 3 column gutter - html

Question

I tried to fix this problem multiple times but it still occurs, I just can't find the right fix.
I cannot create gutter around columns in Bootstrap 3. Here's my Fiddle: jsfiddle.net/creuxttL
My exact problem: When I create these three columns, I expect some gutter to be between them, so they don't look like one big brick. I don't get any gutter by default, so I tried to do it manually - with css class .col . I still don't get any margin/padding around the boxes. What should I do?

Answer 1

You're fiddle does not have bootstrap 3 included. http://jsfiddle.net/va94exo2/ is a slight modification.
Have wrapped all of your col-md-4 content with an inner div and changed the ID="row" to class and removed your extra .col class, have also then styled the inner div.
.inner-content{
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: #00b9ff;
border: 1px solid black;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col {
/*gutter*/
padding-right: 7px;
padding-left: 7px;
}
.col:not(:first-child, :last-child) {
padding-right: 7px;
padding-left: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="col-md-4">
<div class="inner-content">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="inner-content">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="inner-content">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

Not positive this is exactly what you're looking for but if you just want space between the rows you can add a "margin-top" attribute to your css in the ".col-md-4" class.
Hope this helps.
.col-md-4 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: #00b9ff;
border: 1px solid black;
margin-top:10px;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col {
/*gutter*/
padding-right: 7px;
padding-left: 7px;
}
.col:not(:first-child, :last-child) {
padding-right: 7px;
padding-left: 7px;
}
<div class="container">
<div id="row" style="margin-top: 10px;">
<div class="col-md-4 col">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
<div class="col-md-4 col">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div>
</div>
<div class="col-md-4 col">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div>
</div>
</div>

Answer 3

Bootstrap is not added. I modified your code. And I hope you are expecting this.
.col {
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: white;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col h1{
margin-top:0px;
}
<div class="container">
<div id="row">
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
</div>
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div></div>
</div>
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div></div>
</div>
</div>