Для того чтобы контейнер в Bootstrap изменял свой размер при изменении размера окна, вам необходимо использовать несколько классов и стилей.
В Bootstrap контейнер представлен классом "container". Чтобы сделать контейнер адаптивным, вы можете использовать дополнительные классы: "container-fluid" или "container-sm", "container-md", "container-lg", "container-xl", которые определяют адаптивную ширину контейнера в зависимости от размера окна.
Класс "container-fluid" делает контейнер 100% шириной и на всю доступную высоту экрана, а классы "container-sm", "container-md", "container-lg" и "container-xl" устанавливают фиксированную ширину контейнера, которая будет изменяться в зависимости от размера окна. Например, "container-sm" будет иметь ширину 100% на экранах меньше 576 пикселей, "container-md" - на экранах от 576px до 768px и так далее.
Однако, чтобы контейнер реагировал на изменения размера окна "в реальном времени", вам потребуется дополнительный CSS-код. Вот пример CSS-кода, который можно использовать:
.container {
width: 100%;
max-width: none;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
CSS-правило width: 100% делает контейнер адаптивным и шириной на всю доступную область экрана. max-width: none удаляет максимальную ширину контейнера, чтобы он мог растягиваться по мере необходимости. padding-right: 15px и padding-left: 15px задают отступы для контейнера, а margin-right: auto и margin-left: auto устанавливают автоматические отступы справа и слева, чтобы контейнер всегда был по центру.
Таким образом, при использовании класса "container" или "container-fluid" в Bootstrap и добавлении указанного выше CSS-кода, ваш контейнер будет адаптивно менять свой размер при изменении размера окна.