: Why Bootstrap's grid gutters in the middle are twice as large as on the edges? The Grid System of the popular Bootstrap Framework creates column grid where the gap in the middle between columns

@Heady304

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.



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....

Vote Up Vote Down

@Berryessa866

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.

Vote Up Vote Down

@Rambettina927

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.

Vote Up Vote Down