Gestione del layout

Bootstrap ci fornisce una potente griglia mobile-first flexbox basato su un sistema a 12 colonne e dozzine di classi predefinite per creare e definire il layout di una pagina web.
La griglia di Bootstrap è predisposta per la creazione di layout fluidi responsive.
Questo sistema di griglia è costruito con su Flexbox CSS ed è completamente reattivo.

Grid System

Per comprendere il funzionamento del framework dovremo prima comprendere come è conformata una griglia in bootstrap.
Il sistema a griglia di Bootstrap utilizza una serie di contenitori, righe e colonne per il layout e l'allineamento del contenuto. 

<div class="container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>
</div>

Quello che si evince da questo esempio è che sono presenti una serie di <div> il cui comportamento e ruolo è indicato dalle classi associate.

<div class="container">

rappresenta il contenitore/box di un blocco formato da righe e colonne.

<div class="row">

rappresenta una riga; è possibile includere più righe in un container.

<div class="col">

rappresenta una colonna all'interno della riga; è possibile includere sino a 12 colonne singole all'interno di una riga.
Una colonna può occupare 1, o 2, o 3,.. o 12 colonne tra quelle disponibili di default nella griglia di bootstrap.
Mediante apposite classi, potremo gestire quante colonne della griglia, una colonna dichiarata in una riga debba occupare.
L'occupazione di spazio/di colonne, sarà indicabile in maniera differente in base ai differenti dispositivi, con differenti viewport, mediante appositi "breakpoint".

Seppur ancora troppo generico quanto rappresentato nell'immagine qui sopra può essere tradotto in codice così:

<div class="container>

 <div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
 <div class="row">
  <div class="col-4"></div>
  <div class="col-8"></div>
 <div class="row">
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
 <div class="row">
  <div class="col-6"></div>

</div>

Il meccanismo è abbastanza intuitivo.
Un conteiner può contenere un numero indefinito di righe (rows) ed ogni riga può contenere fino a 12 columns (col);
12 colonne equivalgono al 100% dello spazio disponibile nella riga e nella griglia di bootstrap
6 colonne corrispondono al 50% dello spazio disponibile nella riga
3 colonne al 25% dello spazio disponibile nella riga
1 colonna l'8.333%
ecc.

Breakpoint

I breakpoint, "punti di interruzione", sono classi che utilizzeremo per gestire il comportamento delle colonne che compongono la nostra griglia. Più che di comportamento è meglio parlare di modalità di visualizzazione, in ottica responsive, per i vari device.

I punti-di-interruzione rappresentano di fatto classi che si aggiungono a set di classi base.
Prendiamo per esempio la classe "col":

.col 
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
.col-xl-*
.col-xxl-*

"col" rappresenta una colonna equamente divisa ed è allo stesso tempo una classe base; le restanti sono classi "derivate" che mediante "infix" indicano la divisione delle colonne da applicare sui vari dispositivi:

La griglia

Una normale griglia è formata da righe, colonne e spaziature (gutter) tra le varie celle che si vengono a creare.
In bootstrap una griglia è formata da un container, da rows, columns e gutter.
Esamineremo in ordine ogni sua parte e le relative classi che possono delineare i differenti comportamenti.