Bootstrap è un framework creato per organizzare e ottimizzare lo sviluppo di siti responsive “mobile-first” e fornisce anche il supporto a una serie di oggetti per il l'interfaccia grafica, tipo slider, accordion, dropdown, bottoni e script relativi al loro funzionamento...

La cosa più importante è che fornisce una collezione di classi pronte per l’uso basate sull’idea di una griglia di 12 colonne e modulabili a seconda di 5 breakpoint predefiniti:

default (mobile)
sm ≥ 576px
md ≥ 768px
lg ≥ 992px
xl ≥ 1200px
xxl ≥ 1400px

Per il layout responsive di una pagina i principali oggetti che abbiamo a disposizione sono;

Container

Il contenitore principale, è un oggetto centrato sull’asse orizzontale la cui larghezza si adatta ad ogni breakpoint fino a un massimo di 1320px

Row

Sono i contenitori per le colonne e le dispone in orizzontale.
È necessario che tutte le colonne siano dentro ad un row.

Col

Sono oggetti estremamente flessibili.
Ci sono 12 classi di colonna disponibili, che ci permetteranno di creare combinazioni differenti di oggetti che occuperanno da 1/12 a 12/12 del row

col-1, col-2, col-3 ecc...

I Col, combinati con i breakpoint di Bootstrap offrono un enorme numero di possibilità nella gestione del layout:

Esempio:

di default (mobile)  l'oggetto dentro al row è largo 12/12 (100%)

col-sm-6      (sopra i 576px questa colonna è larga 6/12)
col-md-4    (sopra i 768px questa colonna è larga 4/12)
col-lg-3       (sopra i 992px questa colonna è larga 3/12)
col-xl-2       (sopra i 1200px questa colonna è larga 2/12)
col-xl-1      (sopra i 1400px questa colonna è larga 1/12)