What's the best practice for this with Bootstrap?

Answer 1

Rules to Bootstrap:

Use rows and columns alternating
Rows have a negative margin to ensure that the columns respect the containers width.

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

---

Always include col-xs-* on columns
This is to prevent floating issues. If your column is supposed to be 12 wide anyways dont just ignore the col-xs-12

<div class="row">
  <div class="col-xs-12 col-md-6">
      Some stuff
  </div>
</div>

---

Mobile first
Start with the smallest screen size. Go from xs < sm < md < lg and you should be all good!

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      Some stuff
  </div>
</div>

---

Small columns serve as larger columns
A sm column does serve as a md column as well, if not specified otherwise.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
      This is the same
  </div>

  <div class="col-xs-12 col-sm-6">
      as this one
  </div>
</div>

---

And at last: Do not style rows and columns!
Feel free to add classes to modify them, but do not override them in any way!

Bad example:

.row {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row">
  <div class="col-xs-12">
    This is a no-go!
  </div>
</div>

Good example

.pink-bordered {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row pink-bordered">
  <div class="col-xs-12">
    Totally fine
  </div>
</div>