Bootstrap 3 grid in less vs in html

Question

What is the best practice for implementing the bootstrap 3 grid? There are two options, via classes in html and via less mixins.

Using bootstrap classes in html and bootstrap.css (which seems to be the standard):

<div class="container">
    <div class="row">
        <div class="column-md-6 column-xs-8">
            <p>test</p>
        </div>
        <div class="column-md-6 column-xs-4">
            <div class="row">
                <div class="column-md-8 column-xs-6">
                    <p>Another test</p>
                </div>
                <div class="column-md-4 column-xs-6">
                    <p>Yet another test</p>
                </div>
            </div>
        </div>
    </div>
</div>

Using LESS and bootstrap mixins and appropriate html structure:

<div id="maincontent">
    <div id="maincontentarea">
       <div id="blogarticles">
          <p>test</p>
       </div>
       <div id="whatsnew">
          <div id="whatsnewarea">
             <div id="whatsnewheading">
                <p>Another test</p>
             <div>
             <div id="whatsnewlist">
               <p>Yet another test</p></div>
             <div>
          </div>
       </div>
    </div> 
 <div>

and the corresponding LESS:

#maincontent{
   .container();
   #maincontentarea{
      .make-row();
      #blogarticles{
         .make-md-column(6);
         .make-xs-column(8);
      }
      #whatsnew{
         .make-md-column(6);
         .make-xs-column(4);
         #whatsnewarea{
            .make-row();
            #whatsnewheading{
              .make-md-column(8);
            }
            #whatsnewlist{
              .make-xs-column(6);
            }
         }
      }
   }
}

It sounds like a nice idea to have a .LESS file simply using the bootstrap mixins to define the structure, but is that not essentially duplicating the element structure in the less file which is already defined in LESS. Which one is more maintainable?

Your second block of HTML is a bit odd. While it looks at first sight as if you have one div end tag too many (after the Yet another test paragraph) you really have more start tags than end tags. — Mr Lister, Dec 13 '13 at 08:58

score 5 · Accepted Answer · edited May 23 '17 at 12:01

Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.

Using and implementing Bootstrap in a more semantic way won't be always easy:

Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of @Gravy (https://stackoverflow.com/a/18667955/1596547).

Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML

Bootstrap 3 grid in less vs in html

1 Answers1