Where Not to Apply Margins and Padding in Bootstrap Structures

[Antony]

I’ve recently been optimising part of my app for mobile, and I came across the issue where a row can accidentally stick out horizontally beyond the intended width of the page. I always knew there was an issue about where to add horizontal margin and padding to the container-row-col combos, but had never quite got the rules clear in my head… until now!

So for the benefit of those who may also struggle with this, and its effect of the page sometimes jumping around just a little, here are my conclusions…

Comments welcome!

Best wishes,
Antony.

---

First for background, here is what I understand Bootstrap adds to these elements:

    <div class="container">           <!-- margin-x:auto,  padding-x:15px -->
        <div class="row">             <!-- margin-x:-15px, padding-x:0    -->
            <div class="col">         <!-- margin-x:0,     padding-x:15px -->
                <p>Outer R/C</p>
                <div class="row">     <!-- margin-x:-15px, padding-x:0    -->
                    <div class="col"> <!-- margin-x:0,     padding-x:15px -->
                        <p>Inner R/C</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

it is that pesky margin of MINUS 15px on a row that can throw things… and the basic rule is that it is best not to mess around with the padding on any container of a row… be it an actual container or a col.

So here are the rules I’ve devised for where it is safe to add horizontal margin or padding…

    <div class="container">           <!-- margin-x:NO,  padding-x:NO  -->
        <div class="row">             <!-- margin-x:NO,  padding-x:YES -->
            <div class="col">         <!-- margin-x:YES, padding-x:NO  -->
                <p>Outer R/C</p>
                <div class="row">     <!-- margin-x:NO,  padding-x:YES -->
                    <div class="col"> <!-- margin-x:YES, padding-x:YES -->
                        <p>Inner R/C</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

So in simple terms:

Add padding to rows and inner columns
Add margin to columns only

Or even more simple terms:

DON’T PUT PADDING LESS THAN px-4 ON SOMETHING THAT CONTAINS A ROW…

[ben]

Personally, I would not touch the horizontal spacing for containers, rows and columns.

Background:

1. Containers are wrappers for Rows.
2. Rows are wrappers for Columns.
3. Columns are wrappers for content.

When I add a fixed container, I see a margin and padding:

Changing this to a fluid container, the margin disappears, yet the padding remains. The reason for this will be evident when I add a row:

When I add a row, it has the same size as the container (fluid or fixed). The reason is the negative padding that overrides the padding of the container. This is a very tight relationship between the container and the row:

Adding a column, the column is the same size as the row. However the column has padding to keep the contents away from the edges:

As you can see, this is a very tightknit layout and should not be fiddled with.

But what happens when a row is not inside a container but as a child of a column?

Again, this is the container with padding:

And this is the column, likewise with padding:

The row behaves in exactly the same way as though it was inside a container:

For more on layouts (particularly - gutters):

Bootstrap Layout

Correction:

Horizontal margins can be used to place columns, as the documentation points out

[LeoRLM]

A handy little trick I used to outline everything in red - means that you can see what is causing the overflow!

* {
    outline: solid 1px red;
}