The Grid System of the popular Bootstrap Framework creates column grid where the gap in the middle between columns is twice as large as the edge margins:


Is there any reasons for this unequal spacing (as opposed to making all gaps of equal size)?

Are there known design principles supporting this decision?

  • Would it be more important to ask: was there actually a decision? – Paul Apr 19 '16 at 7:49
  • @Paul I can ask it, but what is the answer? ;) – Dmitri Zaitsev Apr 19 '16 at 8:20
  • Try some CSS magic. – Paul Apr 19 '16 at 11:17

Bootstrap adds padding left & right to its columns. Causing the double up of spacing where columns meet. In essence the spacing is of equal size. When using the parent class of .container (rather than .contain-fluid) the columns are centred on the page, making the left right margins unnoticeable.

The alternative is putting padding only left or right, causing the first or last column to have unusual spacing. Which could be offset with :first or :last selectors to remove the padding.

In a mobile first approach padding consistent left and right keeps the columns centred with even breathing space.

Bootstrap Paddin

EDIT: On looking at it further, the .row has negative margin equal to the padding size. Zero out the .row margin and it has equal spacing. As to why its like that....

| improve this answer | |

The reason for any desicion (if there even was a councious decision) is only known by the Bootstrap development team. I did have a quick search on the GitHub repo, and there are a few issues relating to the margins but nothing about any specific design decisions.

The reason for the inconsistency is that the grid columns extend to the edge of the container, and the containers margin (or padding) is smaller than the combined gutter width. I would suspect this is just an oversight.

| improve this answer | |

It's a normal behavior of the bootstrap's grid. When you define a column, we always specify the margin left and right. When two columns are close, they add their respective margins.

| improve this answer | |
  • Isn't it the point of the framework to specify the margins for you as part of its grid? – Dmitri Zaitsev Apr 19 '16 at 7:57
  • @DmitriZaitsev: (Hence my question in your post!) ;o) – Paul Apr 19 '16 at 11:16

Columns have L/R padding of 15px for a total of 30 between them - called a gutter. (You can turn it off on a row by adding class no-gutters).

The outside columns have no neighbor so only see one padding 15px on the outsides.

Containers also have the same padding in case you are just having a container and content- without a row of columns (I guess).

If you add a row, it assumes you will be adding columns that have padding built in, so the row effectively removes the parent container's padding area by using negative margin L/R.

Why the default is to have padding for everything is to have some built-in separation of boxes on the page. so you can concentrate on the content 'inside' the boxes rather than the finer details of box layout. But you can easily turn all that off with no-gutters class on the row.

| improve this answer | |
  • You can delete this- I'm wrong – Joe Jul 12 '18 at 23:24
  • you need to delete it yourself – Luciano Jul 13 '18 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.