[![Il marchio del framework Bootstrap](/sites/default/files/styles/large/public/blog/bootstrap_0.png.webp?itok=qraFY7WH)](https://www.immaginaria.net/sites/default/files/blog/bootstrap_0.png "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](https://getbootstrap.com/), 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>=1400pxImmaginiB3xssmmdlg.img-responsiveB4colsmmdlgxl.img-fluidB5colsmmdlgxlxxl.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).



 



 

  [Internet e dintorni](/index%2ephp/area/internet-e-dintorni) [bootstrap](/index%2ephp/tags/bootstrap)

[css](/index%2ephp/tags/css)

[web design](/index%2ephp/tags/web-design)

 

 

 

 Pubblicato da: Redazione

 il giorno 10/04/2022