nikolas nikolas - 2 months ago 17
CSS Question

Boostrap grid implement margin right and top

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

output

But my original grid system is

original

A margin in top and right.

How can I implement this on bootstrap grid system

Answer

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