1.2 – Basic Bootstrap Layout

Per migliorare la visualizzazione del contenuto delle pagine ho impostato un <div> con id page e classi site e container.
L’apertura del div risiede nell’header (subito al di sotto del body) e la chiusura nel footer (entrambi nel tema child).

All’interno dell’header della pagina (<header>) ho creato un altro div con classe row per gestire il grid system di bootstrap.

Al di sotto dell’header ho creato un altro div con id wrapper e classe row all’interno del quale sono contenuti il main e l’aside della barra di navigazione laterale.

Al momento tutte le pagine sono impostate in modo che il main occupi 8 colonne su 12 all’interno della “row” del div wrapper e l’aside della sidebar 4 a partire da un breakpoint di schermo medio (720px). Fino a quel punto la visualizzazione è impostata su 12 colonne per entrambe le sezioni e al ridimensionamento della finestra il contenuto del main viene prima di quello della sidebar verticalmente.
La disposizione orizzontale e verticale delle due sezioni può essere modificata tramite Flexbox.

<main id="primary" class="site-main col-12 col-md-8">
<aside id="secondary" class="widget-area col-12 col-md-4">