Bootstrap: Why doesn't Bootstrap columns have top/bottom padding?

[tomhrtly]

Just out of curiosity, why doesn't Bootstrap include padding-top or padding-bottom on all of the column classes?

Surely it would be more consistent to add the same spacing across all column elements? Is this intentional? If so would someone be able to explain?

[rafalp]

If you nest columns inside column (perfectly valid use case when creating responsive site elements), you now have extra padding you need to remove. Same goes for using columns to lay out things inside other containers (eg. panels/cards/list groups).

In CSS it's generally easier to add than to remove.

[bardiharborow]

By convention, and in line with what rafalp says, columns handle margins but not padding.

[tomhrtly]

@bardiharborow Not too sure I understand what you've said as the columns in Bootstrap already have padding to the left and right?

I've been using Bulma for a while and maybe it's because I'm used to having padding all around the column but I'm getting the impression I wouldn't have to keep adding margin/padding utilities to my rows/columns for spacing on the top and bottom of my section if it was already added to the columns.

[bardiharborow]

@tomhrtly, you are correct, for some reason I momentarily thought gutters were margins. I'll let someone who can articulate the reasoning a little better close this.

[mdo]

The primary purpose of the grid system is to organize content horizontally—we've never had vertical padding on them by default in the 7+ years of the project. Usually the spacing is taken care of by the content within those columns.

[tomhrtly]

@mdo Thanks for the clarification