Контейнеры Bootstrap 5 Адаптивные контейнеры

Контейнеры Bootstrap 5 Адаптивные контейнеры используются для группировки HTML-элементов, а также обеспечивают поддержку макета сетки. Он имеет встроенную отзывчивость, которая полезна при разработке.

Классы адаптивных контейнеров Bootstrap 5:

1. container-sm: Container small — это класс, который стилизует контейнер со 100% шириной до 540 пикселей, как только ширина превысит 540 пикселей, он будет иметь фиксированную ширину.
2. container-md: Container medium — это класс, который стилизует контейнер со 100% шириной до 720 пикселей, как только ширина превысит 720 пикселей, он будет иметь фиксированную ширину.
3. container-lg: Большой контейнер — это класс, который стилизует контейнер со 100% шириной до 960 пикселей, как только ширина превысит 960 пикселей, он будет иметь фиксированную ширину.
4. container-xl: Большой контейнер — это класс, который стилизует контейнер со 100% шириной до 1140 пикселей, как только ширина превысит 1140 пикселей, он будет иметь фиксированную ширину.
5. container-xxl: Большой контейнер — это класс, который стилизует контейнер со 100% шириной до 1320 пикселей, как только ширина превысит 1320 пикселей, он будет иметь фиксированную ширину.

Синтаксис:

<div class="container-*">
    ...
</div>

Примечание. Здесь * будет заменено значением класса (sm, md, lg, xl и xxl).

Пример 1: В этом примере мы будем использовать контейнеры sm, md и lg. контейнер sm имеет 100% до тех пор, пока не будет достигнута маленькая точка останова, то есть до 540 пикселей, аналогично для точки останова md - 720 пикселей, а для lg - 960 пикселей.

Выход:

Пример 2: В этом примере мы будем использовать контейнеры xl и xxl. Эти контейнеры предоставляются начальной загрузкой 5 для очень широких устройств, где размер точки останова составляет 1140 пикселей для xl и 1320 пикселей для xxl. Они могут быть реализованы следующим образом.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/layout/containers/#responsive-containers