Контейнер
container
sm
md
lg
xl
Классы
| Класс | Контрольная точка | Значение |
|---|---|---|
container |
- |
width: 100%; |
sm |
max-width: 576px |
|
md |
max-width: 768px |
|
lg |
max-width: 992px |
|
xl |
max-width: 1200px |
Описание
Контейнер используется для фиксации ширины элемента при изменении ширины области просмотра. По умолчанию, максимальная ширина контейнера равна размеру контрольной точки для текущей области просмотра.
<div class="container"> ... </div>
Обратите внимание, что контейнер не центрируется автоматически и не имеет встроенных горизонтальных отступов. Для того чтобы отцентрировать контейнер и добавить горизонтальные отступы, необходимо добавить соотвествующие модификаторы
<div class="container m-right-auto m-left-auto p-1"> ... </div>
Адаптивность
Для использования контейнера, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm,
md,
lg,
xl
) через двоеточие (:) к модификатору.
Например, воспользуйтесь модификатором
md:container
для того чтобы применить контейнера для экранов размером Medium и больше.
<div class="md:container"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.