css - Bootstrap - do we have to use rows and columns?

Question

Let me explain with 2 examples:

<div class="row">
  <h1>Title</h1>
  <div class="col-md-12">Content</div>
</div>

vs

<div class="row">
  <div class="col-md-12"><h1>Title</h1></div>
</div>
<div class="row">
  <div class="col-md-12">Content</div>
</div>

The examples are overly simplified but my question is that does everything have to be within a column or where needed, can they sit outside? Another example:

<div class="row">
  <div class="col-md-6 col-sm-6">
    <img src="img/Police2-600x250.jpg" class="full-width">
      <div class="col-md-12 news">
        <p class="date">POSTED <strong>01 APRIL</strong></p>
        <h3>Heading</h3>
        <p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
      </div>
    </div>
    <div class="col-md-6 col-sm-6">
      <img src="img/Police2-600x250.jpg" class="full-width">
        <div class="col-md-12 news">
          <p class="date">POSTED <strong>01 APRIL</strong></p>
          <h3>Heading</h3>
          <p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
        </div>
    </div>
</div>

I don't want the images to be subject to any padding but I do want the content below it to

Answer 1

They can sit outside of a column, but in doing this you're sacrificing padding. Bootstrap's .row style sets margin-left and margin-right to -15px; the .col-... classes make up for this with 15px padding on either side.

To make up for it, you'd have to manually add this 15px padding to your non-.col-... elements.

That said, however, there's no reason your h1 can't be a .col-... itself:

<div class="row">
  <h1 class="col-md-12">Title</h1>
  <div class="col-md-12">Content</div>
</div>