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-right: 15px;
  padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
  margin-right: -15px;
  margin-left: -15px;
}

what are they used for?
-------------------------------
Thanks guys!
This is my opinion after reading your answers：
1.Add padding to the .container makes the content of .container away from the boudary;
2.But this means now the first/last col is 2 paddings away from the boundary,not so nice. So add .row negative margin to streach out it to the boundary.
Am I right?
btw,I asked this question because I dnt see the difference whether I delete these two rules or not.

Why are you asking? Have you read the Bootstrap documentation? http://getbootstrap.com/css/#grid — Lee, Sep 01 '16 at 10:47
Bootstrap documentation is enough to teach you if you will study. and if do not want these padding dnt use them or write you own classes an css — black_pottery_beauty, Sep 01 '16 at 10:53

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 01 '16 at 10:48

Lee

4,187
6
25
71

Thanks! 1.Add padding to the .container makes the content of .container away from the boudary; 2. But this means now the first/last col is 2 paddings away from the boundary,not so nice. So add .row negative margin to streach out it to the boundary. Am I right? btw,I asked this question because I dnt see the difference whether I delete these two rules or not. – Rubicker Sep 01 '16 at 13:05
So yes that's basically right, if you have two columns inside a `.container`, they'll have 15px padding left and right of the columns. Wrapping these two columns inside a `.row` will push these columns to the absolute boundaries of the `.container` div, making them align nicely again. – Lee Sep 01 '16 at 13:31

Carol Skelly · Answer 2 · 2021-04-21T17:30:41.027

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

score 0 · Answer 3 · answered Sep 01 '16 at 11:13

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.

About Bootstrap Grid system

3 Answers3

Linked

Related