Boostrap grid implement margin right and top - css

Question

Here is my html
.div1 {
border: 1px solid black;
height: 100px;
}
.div2 {
border: 1px solid green;
height: 100px;
}
.div3 {
border: 1px solid red;
height: 100px;
}
.div4 {
border: 1px solid blue;
height: 100px;
}
.div5 {
border: 1px solid yellow;
height: 100px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container main-content">
<div class="row">
<div class="col-md-6 div1">1</div>
<div class="col-md-6 div2">2</div>
</div>
<div class="row">
<div class="col-md-4 div3">3</div>
<div class="col-md-4 div4">4</div>
<div class="col-md-4 div5">5</div>
</div>
</div>
And output is
But my original grid system is
A margin in top and right.
How can I implement this on bootstrap grid system

Answer 1

You can use standard Bootstrap approach and add divs inside columns:
<div class="container main-content">
<div class="row">
<div class="col-md-6"><div class="div1">1</div></div>
<div class="col-md-6"><div class="div2">2</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="div3">3</div></div>
<div class="col-md-4"><div class="div4">4</div></div>
<div class="col-md-4"><div class="div5">5</div></div>
</div>
</div>
It will give you gutter between columns. If 30px is to much you can overwrite Bootstrap CSS.
To add margin-top simply, add it to the div1, div2 etc.
.div1,
.div2,
.div3,
.div4,
.div5{
margin-top: 10px;
}
Working example: https://codepen.io/paweljanicki/pen/wzdazq

Answer 2

I think you want to implement this for every col?
try to override the bootstrap col classes:
col-md-1 {margin: 2px 2px 0px 0px;}
col-md-2 {margin: 2px 2px 0px 0px;}
... till
col-md-12 {margin: 2px 2px 0px 0px;}
if there is no change, force it with !important.
col-md-6 {margin: 2px 2px 0px 0px !important;}

Answer 3

css:
.margin-right-10px{
margin-right:10px;
}
.margin-left-10px{
margin-left:10px;
}
.margin-5px{
margin-left:5px;
margin-right:5px;
}
.margin-top{
margin-top:1px;
}
js
$(".col-md-6").firstChild.addClass(margin-right-10px);
$(".col-md-6").secondChild.addClass(margin-left-10px);
$(".col-md-4").firstChild.addClass(margin-right-10px margin-top);
$(".col-md-4").secondChild.addClass(margin-5px margin-top);
$(".col-md-4").lastChild.addClass(margin-left-10px margin-top);
You can change css as you wish.