Créer des lignes et des colonnes

La première classe à connaître est celle qui permet de créer des lignes :

.row

Il y a ensuite plusieurs classes qui permettent de créer des colonnes :

.col-*

Bootstrap considère 4 catégories d'appareils de visualisation :

	Petit écran (smartphone)	Ecran réduit (tablette)	Ecran moyen (desktop)	Grand écran (desktop)
Conteneur maximum	Automatique	750 px	970 px	1170 px
Valeur de référence	< 768 px	> 768 px	> 992 px	> 1200 px
Classes	.col-xs-*	.col-sm-*	col-md-*	col-lg-*

Prenons un exemple, vous voulez créez une ligne avec deux colonnes sur une tablette :

.row

Avec ce code de base :

<div class="row">
  <div class="col-sm-8">...</div>
  <div class="col-sm-4">...</div>
</div>    

Mais concrètement qu'est-ce que ça signifie de faire ce réglage pour une tablette ? Si vous regardez le tableau ci-dessus vous pouvez voir que la valeur de référence pour la largeur de l'affichage pour une tablette est de 768 pixels. Si l'affichage est au-dessus de cette valeur vous aurez vos deux colonnes accolées (donc aussi pour un grand écran). Par contre pour un affichage plus étroit les deux colonnes vont s'empiler ainsi :

Moralité : vous prévoyez vos colonnes avec une largeur minimale admissible pour que votre mise en page reste lisible et vous utilisez les classes col-* qui correspondent à vos besoins.