When considering rows in web design, I see them as versatile containers capable of holding X number of columns, each equal to 12. These rows are essential for organizing stacked elements (columns).
For example, the column classes col-xs-12 col-md-8 signify that on medium-sized screens and larger, the div will occupy 8/12 of the page, while on smaller mobile screens (xs), it will span all 12 columns. This complements the col-xs-12 col-md-4 class perfectly because 8 + 4 equals 12.
If your site follows a consistent structure with 8/12 and 4/12 column widths, then just one row can suffice. Otherwise, you'd create additional rows for varying column widths. Here's an illustration:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class adds spacing around your entire site, but for sections requiring full width, close the container and use container-fluid. Afterwards, introduce another container to maintain margins. Hopefully, this clarifies things! This is just my perspective on it.