Bootstrap add margin to column - html

Question

This is probably very simple, but my mind is getting tangled with trying to work this out. Spent an hour or so searching this up and it still isn't working.
My HTML code...
<div class="section-container light-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;">Main Title Right Here</h2>
<h4 style="text-align:center;">Slogan text underneath</h4>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
</div>
CSS
.section-container.light-bg {
background-color: #F5F5F5;
color: #444444;
}
.section-container .light-panel {
background-color: #ffffff;
border-radius:10px;
}
This is currently creating a row with 4 columns that are styled slightly.
Any help or explanation of how to correctly do this using Bootstrap 3 would be greatly appreciated :)

Answer 1

Demo Fiddle
The best approach is to add an inner container, then padding on the columns. This ensures Bootstraps functionality remains as intended.
HTML
<div class="section-container light-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;">Main Title Right Here</h2>
<h4 style="text-align:center;">Slogan text underneath</h4>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
</div>
</div>
CSS
.section-container.light-bg {
background-color: #F5F5F5;
color: #444444;
}
.inner {
background-color: #ffffff;
border-radius:10px;
padding:10px;
}
.col-md-3 {
padding:10px;
}
Alternatively
You can use calculated width/margins., no change to your HTML necessary.
E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.
.col-md-3 {
width:20%;
margin:0 2.5%;
}

Answer 2

I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
This will automatically render some space between the 2 divs.