Esercizio Boostrap

Il grid system di Boostrap permette di adattare il contenuto di una pagina HTML in base a 6 breakpoint di default. I sei breakpoint di default sono i seguenti:

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

Ogni breakpoint è caratterizzato da un prefisso di classe che serve ad indicare il numero di colonne che un elemento deve occupare. Di seguito la tabella di riferimento.

	xs  <576px	sm  ≥576px	md  ≥768px	lg  ≥992px	xl  ≥1200px	xxl  ≥1400px
prefisso classe	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

Utilizzando il grid system realizzare una pagina che contiene 6 blocchi colorati e che cambia layout in base alla dimensione dello schermo del dispositivo.

Visualizzazione per dimensioni schermo ≥1200px

Visualizzazione per dimensioni schermo ≥992px

Visualizzazione per dimensioni schermo ≥768px

Visualizzazione per dimensioni schermo ≥576px

Visualizzazione per dimensioni schermo <576px