Mobile app version of vmapp.org
Login or Join
Rivera951

: 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

@Rivera951

Posted in: #Bootstrap #Grids #Layout #PageLayout #WhiteSpace

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:
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?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Rivera951

3 Comments

Sorted by latest first Latest Oldest Best

 

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

10% popularity 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.

10% popularity 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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme