Per ricapitolare questa serie di script che ci hanno fatto conoscere le novità riguardanti Bootstrap 5.0, facciamo un elenco di tutti i piccoli accorgimenti che dobbiamo tenere in considerazione per eseguire una corretta migrazione dalla versione precedente.

La prima grande novità la troviamo nel grid-system con l'introduzione di un nuovo breakpoint: xxl per le viewport maggiori di 1400px. La distanza tra le colonne è stata ridotta di circa un terzo passando da una dimensione di 30px a una più gestibile 1.5rem, adeguando il cambiamento a tutte le classe di utility, e aggiungendo anche .g-*, .gx-* e .gy-* per il controllo separato dei gutters verticali e orizzontali. Come conseguenza anche la classe .no-gutters è stata rinominato .g-0.

Tutte le classi di posizionamento che includevano le parole right* e left* sono state rinominate in favore di start e end. Per precisione dovremmo aggiornare il codice ovunque abbiamo utilizzato le seguenti classi:

• .left- .right-
• .float-*
• .border-*
• .rounded-*
• .ml-*
• .pl-*
• .text-*

La tipografia subisce dei miglioramenti dietro le quinte con la riscrittura di molti mixin e maps. Per la nostra applicazione questo non comporta alcun cambiamento, ma è bene sapere che le classi .font-weight-* e .font-style-* sono state rinominate in .fw-* e .fst-* ed è stata invece completamente rimossa .text-hide. Inoltre le classi .text-* non applicheranno più effetti di hover o focus ai link, per i quali occorrerà invece utilizzare la classe .link-.

Con il rilascio della versione 5.0, i mixins, che nelle versioni precedenti erano stati segnati come deprecati, sono stati definitivamente rimossi. Tra questi troviamo:

• hover
• float()
• text-hide()
• visibility()
• Molti mixins riguardanti le palette di colori e l'applicazione di color schemes

In conclusione anche i mixin delle media query hanno subito un grande cambiamento, applicando lo stile direttamente sulle classi in ingresso e non sulle successive. Dunque media-breakpoint-down() e media-breakpoint-between() dovranno essere corrette in base al contesto in quanto, se fino alla versione 4.X scrivavamo media-breakpoint-down(md) per specificare tutte le viewports minori di lg, ora possiamo farlo scrivendo media-breakpoint-down(lg).

Come sempre per ulteriori modifiche o approfondimenti la documentazione https://getbootstrap.com/docs/5.0/migration/ riporta tutti i dettagli e le casistiche d'uso.