Exemples de grille bootstrap

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

Dans ces exemples, la .themed-grid-colclasse est ajoutée aux colonnes pour ajouter des thèmes. Ce n'est pas une classe disponible dans Bootstrap par défaut.

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-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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 ci-dessous, les colonnes s'empileront automatiquement.

.col-md-4

Alternative à trois colonnes égales

En utilisant les .row-cols-*classes, vous pouvez facilement créer une grille avec des colonnes égales.

.colenfant de .row-cols-md-3

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-4

Mixte : mobile et ordinateur de bureau

Le système de grille Bootstrap v5 comporte six niveaux de classes : xs (très petit, cet infixe de classe n'est pas utilisé), sm (petit), md (moyen), lg (grand), xl (x-large) et xxl (xx -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 augmente, ce qui signifie que si vous prévoyez de définir les mêmes largeurs pour md, lg, xl et xxl, il vous suffit de spécifier md.

.col-md-8

.col-6 .col-md-4

.col-6

Mixte : mobile, tablette et ordinateur de bureau

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Gouttières

Avec .gx-*les classes, les gouttières horizontales peuvent être ajustées.

.colavec .gx-4gouttières

Utilisez les .gy-*classes pour contrôler les gouttières verticales.

.colavec .gy-4gouttières

Avec .g-*les classes, les gouttières dans les deux sens peuvent être ajustées.

.colavec .g-3gouttières

Conteneurs

Des classes supplémentaires ajoutées dans Bootstrap v4.4 autorisent les conteneurs d'une largeur de 100 % jusqu'à un point d'arrêt particulier. v5 ajoute un nouveau point d' xxlarrêt.

.récipient

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.conteneur-fluide