В кратце: система сеток Bootstrap помогает создавать гибкие макеты. Она состоит из системы строк и столбцов, которая помогает вам структурировать ваш контент.
Строки представляют собой горизонтальные группы столбцов с максимум 12 столбцами на строку. Внутри каждой строки содержимое помещается внутри столбцов и может занимать от 1 до 12 столбцов.
Bootstrap имеет пять различных типов ячеек сетки, а именно Extra small, Small, Medium, Large и Extra large, для каждой из этих уровней сетки существует точка останова.
Bootstrap использует пиксели для определения контрольных точек уровня сетки, различные ширины видового экрана, которые действуют как точки останова для ячеек сетки:
#### Как это устроено
###### Контейнер
Контейнер - это самый внешний элемент, который будет _содержать_ вашу сетку, использовать `container` для `container`с фиксированной шириной в середине экрана (дополнительный край на больших экранах) или `container-fluid` для полной ширины.
```
<divclass="container"></div>
```
###### Ряд
Используйте `row` для группировки столбцов, это будет держать все в строгом порядке и помогать вам структурировать вашу сетку.
Классы столбцов указывают количество столбцов, которые вы хотели бы использовать из возможных 12 в строке. Например, `col-sm-6` будет означать, что ваш столбец будет использовать половину ширины `row` на маленьком экране, а`col-lg-4` будет использовать треть на большом экране.
Полноразмерная сетка с четырьмя столбцами, каждая из которых занимает полную строку на xs-экранах, половину строки на экранах sm и md и четверть ширины строки на больших и очень больших экранах.
_Обратите внимание, что `col-md` и `col-xl` не определены, когда размер не определен, он будет по умолчанию до следующего меньшего размера, который был указан._
Bootstrap предоставляет готовую 12-ти колонную сетку для использования в макетах. Рассмотрим следующий код.
Понятие "mobile first" означает, что макет сетки будет автоматически реагировать на меньшие экраны. Затем HTML определяет макет сетки для больших экранов.
_Это руководство основано на Bootstrap v4 (он будет работать с v3, за исключением того, что дополнительные маленькие экраны определяются как `xs` и нет размера `xl` )_