when using bootstrap framework content placed within containers, rows, , columns. question addresses how mix bootstrap div / container model html5 elements such as:
<header> <main> <footer> from understanding using bootstrap content appears laid out way:
<div class="container"> <div class="row"> with subsequent:
<div class="col-*-*"> to create grids/layout.
my question asks whether should wrap html5 element or div class/id on outside or inside of container / row set utilized bootstrap, such:
<div class="header"> <div class="container"> <div class="row"> or:
<div class="container"> <div class="header"> <div class="row"> or finally:
<div class="container"> <div class="row"> <div class="header"> is there best practice ordering html5 elements or divs using classes/ids such header, footer, etc, bootstrap?
ps: know used div tags , not html5 elements in code examples. figured helpful illustrate asking.
the bootstrap grid system based on classes not restricted specific element. can use div's rows or columns, other html element. if understand correctly wish use html5 elements, ie provide valuable info search engines, screenreaders etc., this:
<div class="container"> <header class="row"> <main class="col-md-6"></main> <aside class="col-md-6"></aside> </header> </div> and on.
the header element functions row, can styled using elements tag.
(not tested bugs/glitches in different browsers , devices), bootstrap's examples based on all-div layouts.
