Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Контейнеры используются для размещения в них содержимого, дополнений и (иногда) центрирования содержимого внутри них. Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.
В Bootstrap используется три разных типа контейнеров:
.container, который устанавливает максимальную ширину max-width в каждой отзывчивой точке останова;.container-fluid, ширина которого width: 100% на всех точках останова;.container-{breakpoint}, то есть ширина width: 100% до указанной точки останова.В приведенной ниже таблице показано, как максимальная ширина max-width каждого контейнера .container и .container-fluid сравнивается с исходными в каждой точке останова.
Посмотрите их в действии и сравните их в нашем примере Сеток.
 Extra small <576px |
 Small ≥576px |
 Medium ≥768px |
 Large ≥992px |
 Extra large ≥1200px |
|
|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |