Exemples de grille d'amorçage
Ci-dessous, nous avons rassemblé quelques exemples de dispositions de grille Bootstrap de base.
Trois colonnes égales
L'exemple suivant montre comment obtenir trois colonnes de largeur égale en commençant par les tablettes et en évoluant vers les grands ordinateurs de bureau. Sur les téléphones portables, les colonnes s'empileront automatiquement :
Exemple
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Trois colonnes inégales
L'exemple suivant montre comment obtenir trois colonnes de différentes largeurs en commençant par les tablettes et en évoluant vers les grands ordinateurs de bureau :
Exemple
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Deux colonnes inégales
L'exemple suivant montre comment obtenir deux colonnes de différentes largeurs en commençant par les tablettes et en évoluant vers les grands ordinateurs :
Exemple
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Pas de gouttières
Utilisez la .row-no-guttersclasse pour supprimer les gouttières d'une ligne et de ses colonnes :
Exemple
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Deux colonnes avec deux colonnes imbriquées
L'exemple suivant montre comment obtenir deux colonnes en commençant par les tablettes et en évoluant vers les grands ordinateurs de bureau, avec deux autres colonnes (de largeurs égales) dans la plus grande colonne (sur les téléphones mobiles, ces colonnes et leurs colonnes imbriquées s'empileront) :
Exemple
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Mixte : mobile et ordinateur de bureau
Le système de grille Bootstrap comporte quatre classes : xs (téléphones), sm (tablettes), md (ordinateurs de bureau) et lg (ordinateurs de bureau plus grands). Les classes peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Conseil : Chaque classe évolue vers le haut, donc si vous souhaitez définir les mêmes largeurs pour xs et sm, il vous suffit de spécifier xs.
Exemple
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Astuce : N'oubliez pas que les colonnes de la grille doivent totaliser douze pour une ligne. Plus que cela, les colonnes s'empileront quelle que soit la fenêtre d'affichage.
Mixte : mobile, tablette et ordinateur de bureau
Exemple
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Effacer les flotteurs
Effacez les flottants (avec la .clearfixclasse) à des points d'arrêt spécifiques pour éviter un emballage étrange avec un contenu inégal :
Exemple
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Décalage des colonnes
Déplacez les colonnes vers la droite à l'aide des .col-md-offset-*classes. Ces classes augmentent la marge gauche d'une colonne de * colonnes :
Exemple
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Pousser et tirer - Modifier l'ordre des colonnes
Modifiez l'ordre des colonnes de la grille avec les classes .col-md-push-*et
:.col-md-pull-*
Exemple
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>