Адаптивная сетка Bootstrap меняет своё поведение в зависимости от разрешения экрана. 1 То, как разметили сетку, определяет, на каких устройствах ячейки будут отображаться в одной строке, а на каких — переноситься друг под друга. 1

По умолчанию сетка поддерживает шесть контрольных точек: 5

1. Очень маленький — Extra small (xs). 5
2. Маленький — Small (sm). 5
3. Средний — Medium (md). 5
4. Большой — Large (lg). 5
5. Очень большой — Extra large (xl). 5
6. Огромный — Extra extra large (xxl). 5

Каждая из этих контрольных точек имеет собственный контейнер, уникальный префикс класса и модификаторы. 5

Например, если указать класс col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. 2 На md, sm, xs устройствах будет другая ширина. 2

Ширина адаптивных блоков задаётся в относительной форме по умолчанию с помощью числа от 1 до 12 (колонок Bootstrap). 3 Это число определяет, какую часть ширины будет занимать адаптивный блок начиная с указанной контрольной точки от ширины родительского блока, то есть ряда. 3

Если сумма чисел в классе столбца превышает 12, то все дополнительные контейнеры помещаются на новую строку автоматически. 1