quería saber cual de la dos opción es la correcta a la hora de usar estas dos tecnologías o si hay otra forma de combinar las dos.
la primera
Código HTML:
    <body>
        <div class="container">
            <div class="row"><!-- header -->
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <header>
                        <nav>
                            <ul>
                                <li> <a href="">Link 1</a> </li>
                                <li> <a href="">Link 2</a> </li>
                                <li> <a href="">Link 3</a> </li>
                            </ul>
                        </nav> 
                    </header>        
                </div>
            </div><!-- header -->
            <div class="row"><!-- section -->
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <section>
                            <article>
                                contenido aqui
                            </article>
                        </section>     
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                            <aside>
                                barra lateral
                            </aside>     
                    </div>                    
            </div><!-- section -->
            <div class="row"><!-- footer -->
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <footer>
                        pie de pagina
                    </footer>     
                </div>
             </div><!-- footer -->                           
        </div> 
    </body>
la segunda
Código HTML:
        <main class="container">
            <header class="row">
                    <nav class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <ul>
                            <li> <a href="">Link 1</a> </li>
                            <li> <a href="">Link 2</a> </li>
                            <li> <a href="">Link 3</a> </li>
                        </ul>
                    </nav>                            
            </header>
            <section class="row">
                <article class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    contenido aqui
                </article>
                <aside class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    barra lateral
                </aside>
            </section>
            <footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                pie de la web
            </footer>
        </main>