Advertisement


Why Bootstrap's grid gutters in the middle are twice as large as on the edges?


Question

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:

http://jsbin.com/baxunex/edit?html,css,output

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?

2016/04/19
1
2
4/19/2016 4:44:00 AM

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

2016/05/19
2
5/19/2016 12:07:00 PM