How to combine Twitter Bootstrap 3 and HTML5 semantic elements?

Question

I want to use Twitter Bootstrap 3, but at the same time I'd like to use HTML5 semantic elements eg. <header>, <footer>, <article>, but I am confused as Twitter Bootstrap's documentation doesn't have examples for these. Is there a good practice for this?

Should my code should be something like this:

<div class="row">
    <div class="col-md-2">
        <aside>...</aside>
    </div>
    <div class="col-md-10>
        <section>...</section>
    </div?
</div>

or maybe this:

<div class="row">
    <aside class="col-md-2">...</aside>
    <section class="col-md-10">...</section>
</div>

or is there a better way of applying semantic elements?

Answer 1

You can do both ways, or even:

<div class="row">
    <aside>
        <div class="col-md-2">...</div>
    </aside>

</div>

I'd go with:

<div class="row">
    <aside class="col-md-2">...</aside>
    <section class="col-md-10">...</section>
</div>

All are correct syntax.

Answer 2

You should look at this: https://css-tricks.com/semantic-class-names/

A good way is to use HTML5 semantic tags, with Bootstrap Less and Mixins. Then define generic class names.

You get HTML code like this:

<section class="news_article">
...new article content...
</section>

Then use Less to add boostrap columns to "news_article", font style etc.

More useful links: https://coderwall.com/p/wixovg/bootstrap-without-all-the-debt