CODEWITHSUNDEEP
csstwitter-bootstrap
Russell
Russell

Reputation: 1814

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

Upvotes: 0

Views: 99

Answers (3)

Pawel Janicki
Pawel Janicki

Reputation: 415

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

Upvotes: 3

Hadnazzar
Hadnazzar

Reputation: 1616

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.

Upvotes: 0

Gabbax0r
Gabbax0r

Reputation: 1836

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;}

Upvotes: 0

Related Questions