Bootstrap 3, 4 e 5
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.
| <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px | Immagini | |
|---|---|---|---|---|---|---|---|
| B3 | xs | sm | md | lg | .img-responsive | ||
| B4 | col | sm | md | lg | xl | .img-fluid | |
| B5 | col | sm | md | lg | xl | xxl | .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).