What's the best practice for this with Bootstrap?

Question

Let's say you have this simple markup.

<div class="container">
 <div class="row">
  <div class="col-md-12">
    <h1> title </h1> 
  </div>
 </div>
</div>

If I wished to add a margin-top to bring the h1 down towards the center of the container (it will position it self at the very top by default), would it be better to apply this onto the h1, .row or .col-md-12 ?

For example:

.row {
 margin-top: 100px;
}

Update: This is NOT a 'primarily opinion-based' question since depending on where I applied the style, it could break the expected behavior when it comes to the responsive side of things. Dawood Awan's answer is a perfect example of the legitimacy of this question and how it is not about opinion.

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>