Контейнеры Bootstrap 4

В HTML, один container (контейнер) это элемент, который может содержать другие элементы, например <div>, <span>.
Класс .container или .container-fluid могут использоваться для данных элементов.
Bootstrap требует элемента контейнера, который будет содержать сетку . Классы контейнеров были созданы специально для этой цели и они могут быть фиксированными или гибкими.

Гибкий контейнер - Class .container-fluid

Гибкий контейнер занимает всю ширину области просмотра.

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

Он будет плавно расширяться и сжиматься по мере изменения размера браузера. Это работает противоположно контейнеру фиксированной шириной, который будет «прыгать» на новый размер при прохождении заданной точки останова.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Container Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h4>.container-fluid Example</h4>
       
      <div class="container-fluid" style="background: #cdd;">
           .container-fluid
      </div>
 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Класс .container-fluid при применении к элементу придаст данному элементу ширину 100%.

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

Фиксированный контейнер - Class .container

Фиксированный контейнер— это адаптивный контейнер фиксированной ширины. Когда вы изменяете размер своего браузера, ширина контейнера остаётся неизменной, пока она не пройдёт определённую точку останова указанную вами, и в этот момент изменится на новую ширину для этой точки останова.

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

Основываясь на размере ширины устройств, Bootstrap делит их на 5 видов:

Устройства с шириной менее 567px называются Extra Small (очень маленькие).
Устройства с шириной более или равные 567px называются Small (Маленькие), или называются устройства sm.
Устройства с шириной более или равные 768px называются Medium (Средние), или называются устройства md.
Устройства с шириной более или равные 992px называются Large (Большие), или называются устройства lg.
Устройства с шириной более или равные 1200px называются Extra Large (Очень большие), или называются устройства xl.

Теперь давайте взглянем на пример к которому применяется класс .container

<h4 style="color:#ff9249">.container Example:</h4>
 <div class="container" style="background: #cdd;">
   .container
</div>

Пример 1: Если ширина устройства меньше 567px, элемент будет иметь ширину 100%.

Пример 2: Если ширина устройства больше или равна 567px и меньше 768px, то элемент будет отображаться в центре (center) и будет иметь ширину в 567px.

Пример 3: Если ширина устройства больше или равна 768px и меньше 992px, то элемент будет отображаться в центре (center) и будет иметь ширину в 768px

Пример 4: Если ширина устройства больше или равна 992px и меньше 1200px, то элемент будет отображаться в центре (center) и будет иметь ширину в 992px.

Пример 5: Если ширина устройства больше или равна 1200px, то элемент будет отображаться в центре (center) и будет иметь ширину в 1200px.