Как работает система адаптивных контейнеров Bootstrap?

Система адаптивных контейнеров Bootstrap работает на основе сетки (Grid), которая позволяет создавать адаптивные раскладки. codelab.pro Сетка разбивает страницу на 12 колонок по горизонтали и адаптируется под шесть основных «точек перелома» (размеров экранов) — от самых маленьких до очень больших. codelab.pro

Некоторые особенности работы системы:

• Контейнеры центрируют и размещают контент по горизонтали. getbootstrap.ru Есть три вида контейнеров: .container (фиксированная по ширине область с адаптивной максимальной шириной), .container-fluid (тянется на всю ширину экрана) и .container-{breakpoint} (например, .container-md) — комбинированный вариант: адаптивная (незаключённая) до указанной ширины, а после — фиксированная. codelab.pro
• Ряды (rows) являются оболочками для колонок. getbootstrap.ru Каждая колонка имеет горизонтальный padding (называемый промежутком) для управления пространством между ними. getbootstrap.ru Затем этому padding противодействуют строки с отрицательными полями, чтобы обеспечить визуальное выравнивание содержимого колонок по левой стороне. getbootstrap.ru
• Колонки гибкие. getbootstrap.ru В каждой строке доступно 12 шаблонов колонок, что позволяет создавать различные комбинации элементов, охватывающих любое количество колонок. getbootstrap.ru Классы колонок указывают количество колонок шаблона, которые необходимо охватить (например, col-4 охватывает четыре). getbootstrap.ru
• Промежутки также являются адаптивными и настраиваемыми. getbootstrap.ru Доступны классы промежутков во всех контрольных точках с теми же размерами, что и поля и отступы. getbootstrap.ru

Ширина одной и той же колонки, а также общая структура сетки может меняться для разных областей просмотра. proglib.io Это называется отзывчивый дизайн. proglib.io Изменениями можно управлять с помощью специальных классов. proglib.io