Exemples de grille bootstrap

Dispositions de grille de base pour vous familiariser avec la construction dans le système de grille Bootstrap.

Cinq niveaux de grille

Le système de grille Bootstrap comporte cinq niveaux, un pour chaque gamme d'appareils que nous prenons en charge. Chaque niveau commence à une taille de fenêtre minimale et s'applique automatiquement aux appareils plus grands, sauf en cas de remplacement.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Trois colonnes égales

Obtenez trois colonnes de largeur égale en commençant par les ordinateurs de bureau et en évoluant vers les grands ordinateurs de bureau . Sur les appareils mobiles, les tablettes et les versions inférieures, les colonnes s'empileront automatiquement.

.col-md-4
.col-md-4
.col-md-4

Trois colonnes inégales

Obtenez trois colonnes en commençant par les ordinateurs de bureau et en évoluant vers de grands bureaux de différentes largeurs. N'oubliez pas que les colonnes de la grille doivent totaliser jusqu'à douze pour un seul bloc horizontal. Plus que cela, et les colonnes commencent à s'empiler, quelle que soit la fenêtre d'affichage.

.col-md-3
.col-md-6
.col-md-3

Deux colonnes

Obtenez deux colonnes en commençant par les ordinateurs de bureau et en évoluant vers les grands ordinateurs de bureau .

.col-md-8
.col-md-4

Pleine largeur, colonne unique

Aucune classe de grille n'est nécessaire pour les éléments pleine largeur.


Deux colonnes avec deux colonnes imbriquées

Selon la documentation, l'imbrication est facile - il suffit de placer une rangée de colonnes dans une colonne existante. Cela vous donne deux colonnes commençant par les ordinateurs de bureau et évoluant vers les grands ordinateurs de bureau , avec deux autres (largeurs égales) dans la colonne la plus grande.

Aux tailles d'appareils mobiles, tablettes et versions inférieures, ces colonnes et leurs colonnes imbriquées s'empileront.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixte : mobile et ordinateur de bureau

Le système de grille Bootstrap v4 comporte cinq niveaux de classes : xs (très petit), sm (petit), md (moyen), lg (grand) et xl (très grand). Vous pouvez utiliser presque n'importe quelle combinaison de ces classes pour créer des mises en page plus dynamiques et flexibles.

Chaque niveau de classes évolue, ce qui signifie que si vous prévoyez de définir les mêmes largeurs pour xs et sm, il vous suffit de spécifier xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixte : mobile, tablette et ordinateur de bureau

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4