Dopo dieci anni, un taglio netto
Bootstrap 5, rilasciato nel maggio 2021, compie la rottura più significativa nella storia del framework: rimuove la dipendenza da jQuery. Per un decennio Bootstrap ha utilizzato jQuery per manipolazione del DOM, gestione degli eventi e animazioni. Ma nel 2021 jQuery rappresenta un retaggio: i browser moderni espongono API native — querySelectorAll, addEventListener, classList, fetch — che coprono la quasi totalità dei casi d’uso che avevano reso jQuery indispensabile.
La migrazione a vanilla JavaScript riduce il peso della libreria e allinea Bootstrap con le pratiche del frontend contemporaneo, dove bundler come webpack e Vite premiano le dipendenze leggere.
Utility API e personalizzazione
Bootstrap 5 introduce una Utility API che permette di generare classi utility personalizzate tramite il file di configurazione Sass. Le utility — classi come mt-3, d-flex, text-center — sono sempre state una parte centrale del framework, ma nella versione 5 diventano un sistema estensibile: gli sviluppatori possono definire nuove proprietà, valori e varianti responsive senza scrivere CSS aggiuntivo.
Il sistema di variabili CSS (custom properties) si affianca alle variabili Sass, rendendo possibile la personalizzazione a runtime — una base per funzionalità come il tema scuro, che Bootstrap supporterà nelle versioni successive.
Griglia, breakpoint e nuovi componenti
La griglia a dodici colonne resta il fondamento del layout, ma riceve un nuovo breakpoint: xxl per schermi superiori a 1400 pixel. Con l’aumento delle dimensioni medie dei monitor e la diffusione di display ultrawide, un breakpoint aggiuntivo permette layout più articolati senza media query personalizzate.
I nuovi componenti includono accordion, con apertura e chiusura animate e supporto per sezioni mutuamente esclusive, e offcanvas, un pannello laterale a scorrimento utile per menu di navigazione su mobile e pannelli filtro. Entrambi funzionano senza jQuery, utilizzando l’API JavaScript nativa del framework.
Supporto RTL
Il supporto per le lingue RTL (Right-to-Left) — arabo, ebraico, persiano — è integrato nativamente. Bootstrap 5 genera automaticamente fogli di stile con direzione invertita tramite RTLCSS, un tool che trasforma le proprietà CSS da left-to-right a right-to-left. Per i progetti che devono supportare mercati multilingue, il supporto RTL nativo elimina una delle personalizzazioni più laboriose.
Un framework maturo nell’era post-jQuery
Bootstrap 5 non reinventa se stesso: la griglia a dodici colonne, le classi semantiche, la documentazione esaustiva e l’approccio component-based restano invariati. Il cambiamento è strutturale, non stilistico: rimuovere jQuery, modernizzare il JavaScript, estendere il sistema di utility e adattare il framework alle aspettative di un ecosistema frontend che in dieci anni è cambiato profondamente.
Link: getbootstrap.com