Sommaire

La largeur des colonnes GRILLE ADAPTATIVE:Largeur des colonnes

1. Les classes dédiées

Pour gérer la largeur des colonnes dans la grille adaptative, Bootstrap utilise un système de classes dédiées défini dans le fichier bootstrap.min.css (ou bootstrap.css).

Sachez que chaque règle @media() utilise son propre préfixe pour les classes CSS à utiliser.

Taille écran

@media

Préfixe des CSS

Smartphone

Aucune règle, comportement par défaut

.col-xs-*

Tablette

@media (min-width: 768px) {...}

.col-sm-*

Moyenne

@media (min-width: 992px) {...}

.col-md-*

Grande

@media (min-width: 1200px) {...}

.col-lg-*

Le suffixe * sera le nombre de colonnes sur lequel doit être placé l’élément.

Prenons un exemple précis : nous souhaitons mettre en place une grille optimisée pour les écrans de taille moyenne. C’est donc le préfixe .col-md- qui est utilisé.

Pour une boîte <div> à placer sur quatre colonnes, la classe sera .col-md-4. Nous utiliserons donc cette syntaxe : <div class="col-md-4">.

Pour une boîte <div> à placer sur six colonnes, la classe sera .col-md-6. Nous aurons donc cette syntaxe : <div class="col-md-6">.

Pour une boîte <div> à placer sur neuf colonnes, la classe sera .col-md-9. Nous utiliserons donc cette syntaxe : <div class="col-md-9">.

Voilà le schéma explicatif des classes à utiliser pour ...