Clever Geek Handbook

How do I adjust the margin in bootstrap?

I'm trying to set up a responsive design for my divs, and I also want to keep the left and right margins up to 5px regardless of the screen width. I have a problem: I have 5 divs inside a parent div and I'm not sure how to set the grid.

My previous pose for a similar question. This does not include child divs. How do I adjust the margin in return?

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 give:

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

I'm not sure how to maintain 5px for each screen. Can anyone help me?

Thank!

+3


source to share


2 answers


As I post for another answer, you can use custom class definitions. In this case, if the number col

does not match the request 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 BootplyDemo

+1


source


You will get 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.

0


source






More articles:


All Articles