Bootstrap row and column class will cancel each other? - html

Question

<div>
<div class="row">
<div class="col-xs-12">
Is it true that 'row' and 'col-xs-12' will cancel each other?
If above answer is yes, why I can see we use row and col class in Bootstrap official website (https://v4-alpha.getbootstrap.com/layout/grid/)?
If above answer is yes, Why?
Any reference document I can read about?
Updates: 'Cancel' means they have opposite effect.

Answer 1

In a sense, yes, they cancel each other out, meaning that the padding added by the parent of a .row will be eliminated with the negative margins of .row.
Let's take a look at even one of the examples from the Bootstrap 4 documentation, with some additional CSS:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
.row {
background-color: lightblue;
}
.container {
background-color: lightgreen;
padding-left: 30px !important;
padding-right: 30px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
Let's consider why the effect of cancelling happens: By default, Bootstrap 4 is styling the container and column classes with a padding of 15px on each side (X axis), and the row class with a negative margin of 15px. The effect of negative margins is the opposite of padding, adding to the size of element instead of shrinking it.
Therefore, the effect of having 15px side-spacing from .container, minus 15px from .row, and finally 15px from the columns, will result in a neat way of spacing the elements centrally on the page. This effect cannot be seen in the first example, as the background styling is applied directly to the column. For observing this effect, we can add markup into the columns so that the column spacing can be observed:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="bg-info px-2">
<span>Gray color is</span>
</div>
</div>
<div class="col">
<div class="bg-warning px-2">
<span>the actual spacing.</span>
</div>
</div>
</div>
</div>
Without having that spacing on the columns will make the elements inside the columns stick to the edges of the page, which is not generally desirable. By omitting the negative margin on the .row, on the other hand, will potentially result into excessive spacing for the columns, so less content will fit in – this is also why it is very important to have proper markup for the Bootstrap Grid System, as otherwise its use will result in undesirable results.
Useful links for learning more:
Bootstrap 4 Grid System (the one you have even mentioned)
The Definitive Guide to Using Negative Margins (Smashing Magazine)
Padding (CSS-Tricks) – also look into box-sizing rule

Answer 2

So I have no idea in what sense do you mean "cancel" out. The only thing that cancels out is the row negative margin on the sides with the padding of the columns. This allows the spacing between the columns without having it on the outer sides.
To get a sense what the grid system provides there is a nice article about it even though it's a little bit old:
https://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471
There are many other. Also on bootstrap.

Answer 3

No, it's not true, the col class is used inside a row class.
The row class defines the space that will be used together but the col class defines the spatial arrangement in that row.