Bootstrap utilise un système de grille pour positionner les différents éléments de page Web. En détectant la largeur de la page du navigateur Bootstrap utilise différentes catégories de viewport :

Bootstrap peut détecter la largeur de la page web pour adapter la largeur des conteneurs.

• sur les smartphones dont l'écran est petit les éléments sont à être présentés les uns au dessous des autres,
• sur ordinateur, dont l'écran est plus large; les éléments peuvent être placés les uns à côté des autres

Bootstrap découpe la page en une grille de 12 colonnes dans laquelle on définit la rageur de chaque élément.

voici un exemple de gtile avec 3 éléments

Quand la page est affichée sur un écran plus petit, soit les conteneurs sont empilés soit ils sont réduits au risque de devenir illisibles : Le rôle des catégories d'équipement permet de préciser ce comportement (réduire ou empiler) en fonction de l'équipement.

Voici un exemple permettant l'afficher

• deux éléments par ligne sur une smartphone avec la classe CSS col-sm-6 soit la moitié des 12 colonnes;
• trois éléments par ligne pour une tablette avec la classe CSS col-md-4 soit un tiers des 12 colonnes;

Il est bien sûr possible de gérer plusieurs lignes avec des éléments définis avec un nombre de colonnes différents :