CSS для класса Bootstrap «Контейнер» и дополнительные методы для адаптивных макетов

CSS для «контейнера» класса Bootstrap выглядит следующим образом:

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Класс .containerв Bootstrap используется для создания контейнера фиксированной ширины, который центрирует его содержимое на странице по горизонтали. Он устанавливает ширину родительского элемента равной 100% и добавляет отступы слева и справа по 15 пикселей. Он также применяет автоматическое поле для горизонтального центрирования контейнера.

Вот несколько дополнительных методов, которые можно использовать с классом Bootstrap .container:

  1. .container-fluid: этот класс создает полноразмерный контейнер, охватывающий всю ширину области просмотра.
  2. .container-sm, .container-md, .container-lg, .container-xl: эти классы можно использовать для установки различной ширины контейнера для разных размеров экрана. Например, .container-smзадает ширину контейнера для маленьких экранов, .container-mdдля средних экранов и т. д.
  3. .container-{breakpoint}: вы также можете указать собственные точки останова для ширины контейнера, заменив {breakpoint}на желаемое имя точки останова, например . контейнер-xlили .container-lg.