В Bootstrap есть различные классы и инструменты для управления внешним видом и расположением элементов на веб-странице. Один из них - классы для создания сетки, которые позволяют разделить содержимое на ряды и колонки.
Чтобы свернуть колонку в Bootstrap, вам понадобится использовать возможности CSS и классы сетки Bootstrap.
Создание сетки в Bootstrap осуществляется с помощью контейнеров, рядов и колонок. Контейнеры позволяют группировать содержимое и устанавливают его максимальную ширину. Ряды разделяют содержимое на колонки, а колонки определяют ширину содержимого в каждом ряду.
Чтобы свернуть колонку, вам нужно присвоить ей классы сетки Bootstrap. В Bootstrap 4 вы можете использовать классы "d-none" и "d-lg-none", чтобы скрыть колонку на всех размерах экрана или только на экранах, ширина которых больше или равна "lg"(large).
Например, если у вас есть следующий код:
<div class="container">
<div class="row">
<div class="col-lg-6">
<p>Колонка 1</p>
</div>
<div class="col-lg-6">
<p>Колонка 2</p>
</div>
</div>
</div>
Вы можете добавить класс "d-lg-none" к такой колонке, чтобы свернуть ее на экранах, ширина которых больше или равна "lg":
<div class="container">
<div class="row">
<div class="col-lg-6">
<p>Колонка 1</p>
</div>
<div class="col-lg-6 d-lg-none">
<p>Колонка 2</p>
</div>
</div>
</div>
Теперь вторая колонка будет скрыта, когда ширина экрана превышает "lg". Вы также можете использовать классы "d-md-none", "d-sm-none" и "d-xl-none" для скрытия колонок на разных размерах экранов.
Кроме того, у Bootstrap есть также классы для видимости, например, "d-block" и "d-none", с помощью которых можно показывать или скрывать элементы в зависимости от размера экрана.
Надеюсь, это помогает!