# Контейнеры

**Общая информация**

- необходимы при использовании сеточной системы
- используются для содержания, заполнения и (иногда) центрирования содержимого
- могут быть вложенными, но для большинства макетов это не требуется.

**Контрольные точки**

<table border="1" class="align-center" id="bkmrk-extra-small-extra-sm" style="border-collapse: collapse; width: 44.6429%;"><colgroup><col style="width: 35.0267%;"></col><col style="width: 33.374%;"></col><col style="width: 31.5993%;"></col></colgroup><tbody><tr><td>Extra small</td><td>  
</td><td class="align-right">&lt;576px</td></tr><tr><td>Small</td><td>-sm</td><td class="align-right">≥576px</td></tr><tr><td>Medium</td><td>-md</td><td class="align-right">≥768px</td></tr><tr><td>Large</td><td>-lg</td><td class="align-right">≥992px</td></tr><tr><td>Extra large</td><td>-xl</td><td class="align-right">≥1200px</td></tr><tr><td>Extra Extra large</td><td>-xxl</td><td class="align-right">≥1400px</td></tr></tbody></table>

**Типы контейнеров**

- .container - адаптивный контейнер фиксированной ширины. При изменении размеров браузера его ширина изменяется до новой ширины контрольной точки. При extra small выставляется 100% ширины.
- .container-{breakpoint}, который равен width: 100% до указанной контрольной точки
- .container-fluid, который равен width: 100% во всех контрольных точках

<table border="1" id="bkmrk-%3C576px-%E2%89%A5576px-%E2%89%A5768px" style="border-collapse: collapse; width: 100%; height: 238.375px;"><colgroup><col style="width: 14.3027%;"></col><col style="width: 14.3027%;"></col><col style="width: 14.3027%;"></col><col style="width: 14.3027%;"></col><col style="width: 14.3027%;"></col><col style="width: 14.3027%;"></col><col style="width: 14.3027%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td style="height: 29.7969px;">  
</td><td style="height: 29.7969px;">&lt;576px</td><td style="height: 29.7969px;">≥576px</td><td style="height: 29.7969px;">≥768px</td><td style="height: 29.7969px;">≥992px</td><td style="height: 29.7969px;">≥1200px</td><td style="height: 29.7969px;">≥1400px</td></tr></thead><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">540px</td><td style="height: 29.7969px;">720px</td><td style="height: 29.7969px;">960px</td><td style="height: 29.7969px;">1140px</td><td style="height: 29.7969px;">1320px</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container-sm</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">540px</td><td style="height: 29.7969px;">720px</td><td style="height: 29.7969px;">960px</td><td style="height: 29.7969px;">1140px</td><td style="height: 29.7969px;">1320px</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container-md</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">720px</td><td style="height: 29.7969px;">960px</td><td style="height: 29.7969px;">1140px</td><td style="height: 29.7969px;">1320px</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container-lg</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">960px</td><td style="height: 29.7969px;">1140px</td><td style="height: 29.7969px;">1320px</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container-xl</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">1140px</td><td style="height: 29.7969px;">1320px</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container-xxl</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">1320px</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">.container-fluid</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td><td style="height: 29.7969px;">100%</td></tr></tbody></table>