All grid systems have spacing or “gutters†around columns. In the case of Bootstrap, the gutter is created using padding of 15px around each column. The effective
gutter displayed between neighboring columns in 30px. The outer columns (leftmost & rightmost) need to have 1/2 of the gutter (15px) on the outside to keep spacing
consistent.
The relationship between .container and .row is made complete with columns (col-*). Each row is divided horizontally using Bootstrap’s column classes col-*.