Utiliser une grille Bootstrap de 24 colonnes

Depuis sa création, Bootstrap propose une grille horizontale de 12 colonnes.

Ce nombre ne sort bien sûr pas de nulle part, en effet 12 est un excellent choix pour diviser par 2, 3, 4 ou 6. Cela laisse plus de possibilités qu’une grille de 10 par exemple.

Cependant 12 colonnes ne suffit pas toujours : les colonnes sont vouées à être plutôt larges et finalement assez peu flexibles. C’est pourquoi chez Tinci nous préférons généralement utiliser une grille sur 24 colonnes.

Pour faire cela, nous utilisons la gem bootstrap-sass qui nous permet d’importer Bootstrap après avoir modifié certains variables pour adapter les styles à nos besoins.

# Gemfile
gem 'bootstrap-sass'

En suivant nos conventions, nous avons un fichier app/assets/stylesheets/base/_bootstrap_override.scss qui se charge de régler les variables SCSS avant d’importer Bootstrap :

$brand-primary: $color-blue;
$grid-columns: 24;

@import 'bootstrap';

Une fois cela en place, Bootstrap génère les classes pour 24 colonnes ce qui permet par exemple d’avoir des divisions comme <div class="col-lg-17">.

C’est une petite astuce mais celle-ci nous apporte une immense flexibilité. Attention cependant au fait que si vous changez ce réglage dans un projet existant toutes les classes col-* utilisés jusque-là verront leur largeur divisée par deux.

Si vous n’utilisez pas bootstrap-sass, il vous est toujours possible de régler cette variable sur le site de Bootstrap pour télécharger une version adaptée à vos envies !

Publié le 11 mars 2016

Notre vision des choses vous correspond ? Vous avez envie de travailler avec nous ?