How is .row class defined in Bootstrap?

Question

When I searched .row in bootstrap.css file I got the following definitions:

...
.row:before,
.row:after,
... {
  display: table;
  content: " ";
}

...
.row:after  
... {
  clear: both;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

With these definitions I expect the .row class to behave as following:

• Before and after any row there should be block level element encompassing one white space . The white space before .row should not be cleared and the white space after .row. should be cleared. -- None of this happen actually.

• Any div element with class .row should spread 15px out of its containing element to both left and right. -- This is observable with usual containing divs but not with body element. E.g. if there are two divs woth class row inside the body element:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");  

 .row div:nth-of-type(even) {
  background-color: darkgray
}
.row div:nth-of-type(odd) {
  background-color: lightgray
}

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

As can be seen the text doesn't goes out to the left of the viewport by 15px. Moreover both the rows are rendering without any gap in between. What happened to the .row:after {display: table; content: " ";}?

Please explain.

P.S: I don't know how the @import url at-rule work in SO editor.

Answer 1

.row:before, .row:after{
    display: table;
    content: " ";
    clear:both
}

Answer 2

If you wrap the entire thing in a div, and add overflow: hidden;, you get the following, which is the same as you have achieved above, without the container.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");

.row div:nth-of-type(even) {
  background-color: rgba(168, 172, 176, 0.6);
}

.row div:nth-of-type(odd) {
  background-color: rgba(88, 86, 84, 0.6);
}

#wrapper {
  margin: 50px; 
  background: orange; 
  overflow: hidden;
}

<div id="wrapper">
  <div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

If however, you remove overflow: hidden;, you will see the following:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");

.row div:nth-of-type(even) {
  background-color: rgba(168, 172, 176, 0.6);
}

.row div:nth-of-type(odd) {
  background-color: rgba(88, 86, 84, 0.6);
}

#wrapper {
  margin: 50px; 
  background: orange; 
}

<div id="wrapper">
  <div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

You'll notice the rows sit outside of the beige container. This means the negative margin is being achieved, but it is being hidden by whatever default styles are applied to the body, and counteracted by the padding on the .rows, so it seems as if the margin is not working. You can observe this further using the development tools in your browser.

Answer 3

.row {
  margin-right: -15px;
  margin-left: -15px;
 }

In this above case as you said it'll spread margin 15px to the left and right even if the row is added to the body tag.

 .row:before,
 .row:after,
 {
 display: table;
 content: " ";
  }


.row:after  
{
 clear: both;
}

In the second case its actually adding clearfix to the class row since class col's('col-lg-12') have float left property you've to add a clearfix for parent class.