title: Correct way to structure HTML with Bootstrap
body: <p>I've been using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap</a> for some time now, structuring my HTML elements without really knowing if I'm doing it in a right way. It works but I would like to know if there is a better way of doing it.</p>
  
  <p>Lets take this template for instance:</p>
  
  <p><img src="https://i.stack.imgur.com/sTAHo.png" alt="enter image description here"></p>
  
  <p>What I do first is that I try to divide the page into smaller pieces. In this case I would start by dividing the left and right column, giving the left column 4 and the right one 8 "columns". I would write and position the HTML/class attributes like this:</p>
  
  <pre><code>...
  &lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div id="upperLeftCol" class="col-md-12"&gt; ... &lt;/div&gt;
       &lt;div id="lowerLeftCol" class="col-md-12"&gt;
            &lt;div id="uniqueId1" class="col-md-12"&gt;
                &lt;img src="#" alt="..."&gt;
                &lt;div class="col-md-12"&gt;
                    some messge
                &lt;/div&gt;
            &lt;/div
            &lt;div id="uniqueId2" class="col-md-12"&gt;
                &lt;img src="#" alt="..."&gt;
                &lt;div class="col-md-12"&gt;
                    some messge
                &lt;/div&gt;
            &lt;/div
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-8"&gt;
        .......
    &lt;/div
  &lt;/div&gt;
  </code></pre>
  
  <p>Well you get the picture. I try to divide each subsection as an own div and give it the col-md-12 class attribute since I've noticed it aligns best with the other div that has the same class annotation.</p>
  
  <p>I'm sure there is a more correct way to do this. What is the "best" approach? Also when should I create a new "row"?</p>