uomini contro la violenza sulle donne

Bootstrap 3, 4 e 5

Autore: data pubblicazione: 10 Aprile 2022
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 >=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).