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

  

      Some stuff
  

---

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

  

      Some stuff
  

---

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

  

      This is the same
  

  

      as this one
  

---

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;
}


  

    This is a no-go!
  

Good example

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


  

    Totally fine