Layout a 5 colonne con Bootstrap

I temi attuali usano spesso Bootstrap 3, è un framework CSS che semplifica molto lo sviluppo dei siti responsive.
Personalmente lo uso da quando l'hanno inventato, e lo integro felicemente nei siti che faccio con Contao.

Tuttavia la logica a griglia che sta alla base di tutto ha un limite abbastanza evidente: se abbiamo 12 colonne, e le dividiamo in parti uguali per impostare i nostri elementi, siamo sempre costretti a mettere 2, 3, 4 oppure 6 elementi per riga. Come facciamo ad inserirne 5? E' una esigenza abbastanza comune, eppure con Bootstrap non sarebbe possibile soddisfarla.

O meglio, possiamo riuscirci solo con un compromesso, cioè creando 5 elementi larghi 2, e nel primo elemento diamo un offset di 1, ecco che abbiamo 5 elementi centrati. Questa non è una soluzione soddisfacente, perché i nostri 5 elementi sono ridotti e sprecano uno spazio da 2, e sono disallineati rispetto al resto del layout.

Per fare in modo che i 5 elmenti siano grandi uguali, occupino l'intero spazio disponibile, e siano ben allineati al resto della pagina, dobbiamo aggiungere poche righe di CSS, espandendo le capacità di Boostrap. Ecco cosa aggiungere ai nostri stili:

Ogni colonna quindi è larga 20%. Ho chiamato la mia classe con il numero "24", in realtà dovrebbe equivalere a 2,4, ma nel nome non posso usare punti o virgole. Questione da poco, basta dare un nome significativo, diverso da quelli usati da Boostrap.

Fatto! Si, è tutto, ora è possibile adoperare "-24" esattamente come le altre classi di Boostrap.