Just out of curiosity, why bootstrap uses -15px left and right margins which going to cancel the 15px left and right padding on .container and .container-fluid classes.
Why set padding and then cancel it with a negative margin on the child?
Asked
Active
Viewed 2,475 times
8
2 Answers
2
A negative margin on row avoids the blank space that would be left because of padding of first column. In its absence the whole layout will look a little indented.
pixlboy
- 1,452
- 13
- 30
-
But there is 15px padding on the container. Why is that? why not be like this instead: .container { padding-left: 0; padding-right: 0; } .row {margin-left: 0; margin-right: 0; } – Omar A Dec 13 '17 at 06:30
-
The left and right padding in columns is present so that we have a gutter between columns, a separator. By the way Bootstrap provides a custom build option so that we can change these values based on requirement. – pixlboy Dec 13 '17 at 17:34
1
As in Official Bootstrap Website said:
Rows are wrappers for columns. Each column has horizontal
padding(called a gutter) for controlling the space between them. Thispaddingis then counteracted on the rows with negativemargins. This way, all the content in your columns is visually aligned down the left side.
Mhd Alaa Alhaj
- 2,438
- 1
- 11
- 18