Q:

When should I use container and row in Twitter Bootstrap 3?

Please explain to me when to use the classes container and row. I'm not sure because the documentation of Bootstrap is quite unclear about this part.
I'm using Bootstrap 3.

A:

container is a container of row elements.
row elements are containers of columns (the docs call it grid system)
Also, container sets the content's margins dealing with the responsive behaviors of your layout.
Thus the container class is often used to create 'boxed' contents based on the style guidelines of the Bootstrap project.
If you want to go "out of the box" creating a full width grid you can use only row elements with columns inside (spanning the usual 12cols total).
The container and row classes are for elements inside the body.
So a basic layout would be:
<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

For a boxed responsive layout.
If you omit the container you'll get a full-width layout.
Jumbotron example
Jumbotron is a good example of the container behavior. If you put a Jumbotron element in a container element it has rounded borders and a fixed width based on the responsive width.
If the Jumbotron is outside a container, it spans full-width without borders.

A:

I was wondering about the same and to understand that I went through the bootstrap.css of version 3. The answer lies in from line no. 1585 to 1605. I'll post those lines here for better understanding as below.
.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Whole of the code is self explanatory. However, to elaborate on this, container would take 750px if screen width is between 768px and 992px and so forth as the code shows. Now, for common screen resolution of more than 1200, container would take 1170px, but subtracting the padding of 30 px (15px+15px), the effective space left is 1140px, which is centered on the screen as the margin of left and right is set to auto.
Now, in case of class="row", there is below code:
.row {
  margin-right: -15px;
  margin-left: -15px;
}

So, if row is inside the container, it would effectively snatch the padding of 15px each side from the container and use the full space. But if the class row is inside the body tag, it would tend to move out of the visible area into both the left and right side of the browser due to negative margins.
I hope it was made clear.

