Tuesday, November 3, 2015

Padding and Margins with Bootstrap Grid

While constructing a page using the Bootstrap grid system, I noticed some extra padding in one of the rows. Documentation said that each column is given a 15px horizontal padding to create a gutter. It also said that rows have a -15 margin on both ends to offset this effect for the first and last columns.

This is all fine. However, I still noticed an extra padding even though my rows and columns seemed to be nested properly. After trying to remove various pieces from the HTML, it turns out that any element with the "container" or "container-fluid" classes adds yet another 15px horizontal padding. Removing the extra container fixed my issue.

No comments:

Post a Comment