About Bootstrap Grid system

Question

I\'m confused about this part of code in the source code of bootstrap 3.3.5

/*line 1585 - 1590*/
.container {
  padding-         


        

Answer 1

Generally, containers as it states, adds padding on left and right so that content doesn't go right to the edge of the screen, making it useable for mobiles and easier to read.

When using columns, these add padding left and right, which can appear 'out of alignment' against the rest of the content, so you can wrap those in a row, using negative margins to bring that padding back in line with the rest of the content.

Again, this is to make it appear more aligned and clean.

From the Bootstrap Documentation (http://getbootstrap.com/css/#grid) :

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Use rows to create horizontal groups of columns.

Content should be placed within columns, and only columns may be immediate children of rows.

Answer 2

Bootstrap columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.

Answer 3

Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don’t put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.

The Bootstrap row uses negative margins to counteract the padding of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. This is important for responsive designs to ensure even spacing since the columns may wrap or stack vertically (changing the number of columns displayed in each row).

The same is also true in Bootstrap 4.

Also see:
Bootstrap Rows and Columns - Do I need to use row?
How the Bootstrap grid works