CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
FlyingCat
FlyingCat

Reputation: 14250

How to setup the margin in bootstrap?

I am trying to setup a responsive design for my divs and I also want to maintain the left and the right margin to 5px no matter the screen width. The problem I have is I have 5 div inside a parent div and I am not sure how to set the grid.

My previous pose for the similar question. It's not taking account of child divs. How to setup margin responsively?

For example:

<div class="container">
    <div class="row">
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
    </div>
</div>

This will produce:

 -------------------------------------
|5px+ ----  ----  ----  ----  ---- 5px+
|      div    div   div  div   div 
|
|
|

I am not sure how to maintain the 5px for every screen. Can anyone help me about it?

Thanks!

Upvotes: 3

Views: 3491

Answers (2)

DaniP
DaniP

Reputation: 38252

As I post on the other answer you can use custom class definitions. In this case if the number of col doesn't fit the request of 12 you can do this:

<div class="container-fluid">
    <div class="row margin">
        <div class="col-xs-12">
            //contents...
        </div>
        ..........
    </div>
</div>

.margin {
  padding:0 5px;
  }
@media (min-width:768px) {
  .margin > div {
    background:red;
    width:20%;
  }
}

Check this BootplyDemo

Upvotes: 1

austinthedeveloper
austinthedeveloper

Reputation: 2601

You will give yourself a headache if you use margins on grids. Switch to padding and it won't affect the grid:

.container {
  padding-left: 5px;
  padding-right: 5px;
}

Padding can be added to any column without having to worry about it breaking.

Upvotes: 0

Related Questions