Bootstrap and HTML5 tag structure semantics

Question

I am coding a site using bootstrap and html5 boilerplate together and I am trying to structure it in the most semantic valid way possible.

so my page is pretty simple it consists of a header, a section with two columns, and a footer.

I am wondering which of the ways below is the best way to structure things semantically for example the section and footer parts of the page.

<div class="row">
   <section>
      ....
   </section>
<div class="row">
   <footer>
     ....
   </footer>
</div>



<section>
   <div class="row">
     ...
   </div>
</section>
<footer>
   <div class="row">
     ....
   </div>
</footer>


<section class="row">
  ...
</section>
<footer class="row">
  ...
</footer>

Answer 1

The last one:

<section class="row">
  ...
</section>
<footer class="row">
  ...
</footer>

The row class is presentational.

Answer 2

Use <article> tags for the main content. If both of the columns contain article content, then you can use <section>s to separate the columns.

<article>
  <section id="part-1">
    <header class="section-header">...</header>
    ...
  </section>
  <section id="part-2">
    <header class="section-header">...</header>
    ...
  </section>
</article>
<footer id="main-footer">
  ...
</footer>

And then add as many <div>s as you need as hooks for the CSS.

Don't use class names that refer to a specific visual rendering, such as "row". Instead, use classes (and IDs) that refer to the content, such as "part-1" and "main-footer".