. Now you have a row that is secretly a grid that is 12 squares across. If you make a div inside of this, it will be 12/12 squares across—the full width. But the point of the invisible squares is to make divs that span less than 12 squares across. Moreover, you can have the spans change automatically with the browser width.

Next concept: you can combine these.

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

This means: “When the browser is wider than 768px, each div is half-way across; when less than 768px, a third-way across.”

There is a hierarchy of precedence here. If the container is < lg, Bootstrap falls back on whatever you’ve set for md. If md has not been set, it looks at sm. If sm not set, then it looks to your setting for xs. If that is not set, the divs are stacked vertically.