Bootstrap columns padding on left and right - can i use margin instead?

Question

I am building my first site with bootstrap (3.3.4) and the columns like for example "col-md-#" have a 15px padding on the left and right side.

Can I replace this padding with margin without getting problems later?

The reason is that i have many boxes with colored background (color or image) and with padding i have no visible space between the boxes when they have a colored background. I don't understand why they use padding and i think there must be a good reason for not using margin(?)

http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding — OneTwo, Jun 09 '15 at 15:53

score 5 · Answer 1 · answered Jun 09 '15 at 15:56

Because col-* is only for construct your grids. If, then, you want to personalize what it's in you grid, you have to add a new block in it, and work with this block instead of the grid.

<div class="row">
    <div class="col-sm-6">
        <div class="greenBlock"></div>
    </div>
    <div class="col-sm-6">
        <div class="yellowBlock"></div>
    </div>
</div>

Instead of

<div class="row">
    <div class="col-sm-6 greenBlock"></div>
    <div class="col-sm-6 yellowBlock"></div>
</div>

score 3 · Accepted Answer · answered Jun 09 '15 at 15:58

3

It's better practice not to modify core Bootstrap code.

If your only concern is having visible space when the columns have a background color, you can utilize CSS3 and use background-clip: content-box; (on the column) to restrain the background painting area to the content box only. Browser support isn't much of a concern either.

answered Jun 09 '15 at 15:58

HelloWorld

335
2
7

I think this is the best solution for me so far because i don't like to use too much DIVs. – herrfischer Jun 10 '15 at 07:46

Carol Skelly · Answer 3 · 2016-04-06T13:09:11.880

0

Check out this helpful article on the Bootstrap grid, and that will help to explain why padding is used for the gutter: http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works

As @thibault-henry explained, you'll want to use a container for your content inside the columnns...

Example: http://codeply.com/go/BCmjjlnrg0

edited Apr 06 '16 at 13:09

answered Jun 09 '15 at 16:34

Carol Skelly

351,302
90
710
624

score 0 · Answer 4 · answered Jun 09 '15 at 20:37

As we know, the box-model does not include the margins into the width of the div. So the margins bleed outside the div.

That is the reason, you can not replace padding:15px with margin. Bootstrap by default uses the following box-model css property.

box-sizing: border-box;

But still if you want to have space between 2 boxes then there is a method.

wrapping the child div with a col-xs-12 and adding the background color to it.

.a {
    background-color: yellow;
}

.b {
    background-color: red;
}

.c {
    background-color: green;
}

<div class="row">
<div class="col-xs-12 a">
    
    <div class="col-xs-6 ">
        <div class="col-xs-12 b">
        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
    </div></div>
    <div class="col-xs-6 ">
        <div class="col-xs-12 c">
        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
    </div></div>
</div>
</div>

Check my JSFIDDLE link to understand it clearly.

Bootstrap columns padding on left and right - can i use margin instead?

4 Answers4