Salta al contenuto principale

Aiutaci a migliorare il sito: rispondi al questionario | Se hai dubbi o problemi leggi la Guida all'uso del sito

Bootstrap 3, 4 e 5

Il marchio del framework Bootstrap

Tabella di conversione delle utility responsive fra le ultime versioni di Bootstrap

Ho creato questa tabella per facilitare l'aggiornamento di vecchi temi costruiti su B3 o B4, alla versione più recente di Bootstrap, la 5.

La condivido poiché forse potrebbe essere utile a qualcun altro, che ovviamente già conosce e utilizza Bootstrap.

Tabella di conversione
 <576px>=576px>=768px>=992px>=1200px>=1400pxImmagini
B3xssmmdlg.img-responsive
B4colsmmdlgxl.img-fluid
B5colsmmdlgxlxxl.img-fluid

 

Come utilizzare la tabella

Le abbreviazioni (xs, sm, md, lg, xl ed xxl) vanno usate in combinazione con il prefisso col.

Esempio: nel vecchio tema in B3 ho un elemento con le seguenti classi:

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">

Per trasferire questo comportamento responsive in un tema basato su B4, l'elemento sarà:

<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">

Poiché nel passaggio di versione si è aggiunto un breakpoint per i dispositivi mobili, la prima classe potrebbe anche essere "col-6", questo lo deve valutare il web designer caso per caso.

Si noti che nelle versioni 4  e 5 è scomparsa l'abbreviazione "xs", perché l'impostazione è mobile first. Dunque, si usa semplicemente "col" per la visualizzazione su smartphone (sotto i 576px di larghezza).