What is the padding for the Bootstrap container?

See:

Container: Container works this way so that container borders can have that virtual padding of 15px around content, but does not require the body tag to have a% with% of 15px. This was a change in Bootstrap 3's RC1. Otherwise, the whole body would have a padding of 15px, this would make even padding without Bootstrap classes not occupy 100% of the width of divs

body The Rows: has a negative margin equal to the container fill so that they also touch the container border, the negative margin overlapping the rows of the container. This allows padding not to be pushed in by% container%.

row : padding also has Cols of 15px, so they finally keep their content 15px away from the container / browser / viewport border, gutter 15px + 15px between the columns. That way, this serves to create a consistency between column spacings, regardless of whether the column is first or last column. Now, there will always be 15px of spacing between the columns.

Now let's look at these images

cols- has two purposes:

1 - Provide width constraints on responsive widths. When responsive sizes change, it is the container that changes. Rows and columns are all percentage-based, so they do not need to be changed.

2 - Provide padding so that content does not touch the edge of the browser. That's 15px on each side, as seen in pink on the image.

Youshouldneverusecontainerinsideanother!

Thepaddingalsohaveauniqueaspectofhaving15pxofnegativeedgeoneachside,asseeninblueintheimagebelow.Thecontainercomposingrowswouldnormallyberestrictedwithinthecontainerfill,touchingtheedgesofthepinkarea,butnotbeyondit.Negativemarginsof15pxpushthelineoutoverdivof15pxofrow.

Neverusealineoutsideacontainer,itwillnotwork.

Thecolumnsnowhave15pxpadding,seeninyellow.Thisfillmeansthatthecolumnsactuallytouchtheedgeoftheline,whichinturntouchestheedgeofthecontainerbecausethelinehasthenegativeedgeandthecontainerhaspositivepadding.But,columnpaddingpushesanythinginsidethecolumntowhereitneedstobe,andalsoprovidesaspacingof30pxbetweenthem.

Neveruseacolumnoutsidealine,itwillnotwork.

Source: link

Briefly:

The padding need a containers to not let the content go to the margins, and to maintain a spacing between one column and another. The cols needs the margin to equalize the padding of the row by not letting the content touch the browser window and to avoid that only the first and last column have left and right spaces. So with this set of padding and container you get a consistency in the grid spacing and you can still have padding that reaches the edge of the browser window since you do not need margins in divs / p>