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