Correct way to structure HTML with Bootstrap [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I've been using Bootstrap 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.
Lets take this template for instance:
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:
...
<div class="row">
<div class="col-md-4">
<div id="upperLeftCol" class="col-md-12"> ... </div>
<div id="lowerLeftCol" class="col-md-12">
<div id="uniqueId1" class="col-md-12">
<img src="#" alt="...">
<div class="col-md-12">
some messge
</div>
</div
<div id="uniqueId2" class="col-md-12">
<img src="#" alt="...">
<div class="col-md-12">
some messge
</div>
</div
</div>
</div>
<div class="col-md-8">
.......
</div
</div>
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.
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"?

Answer 1

I prefer to use more rows:
<div class="row">
<div class="col-md-4">
<div class="row">
<div id="upperLeftCol" class="col-md-12"> ... </div>
The code is better to understanding for others persons and avoid some design errors when you are using dynamic cells.