Контейнеры
ФиксированныйОбщая контейнеринформация
- необходимы при использовании сеточной системы
- используются для содержания, заполнения и (иногда) центрирования содержимого
- могут быть вложенными, но для большинства макетов это не требуется.
АдаптивныйКонтрольные точки
| 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% |