Как сделать полностью сворачиваемые сайдбары на бутстрап?

Чтобы создать полностью сворачиваемые сайдбары на Bootstrap, вам потребуется немного изменить стандартную структуру HTML и добавить некоторые пользовательские стили.

1. Сначала создайте главный контейнер, который будет содержать сайдбар и основное содержимое страницы. Например:

<div class="container-fluid">
  <div class="row">
    <div class="col-3 sidebar"> <!-- Страница сайдбара -->
      <!-- Ваше содержимое сайдбара -->
    </div>
    <div class="col-9 main-content"> <!-- Основное содержимое страницы -->
      <!-- Ваше основное содержимое страницы -->
    </div>
  </div>
</div>

2. Стилизуйте сайдбар с помощью пользовательских классов и стилей CSS. Например:

.sidebar {
  background-color: #f8f9fa;
  height: 100vh;
  transition: all 0.3s;
}

.main-content {
  background-color: #fff;
  transition: all 0.3s;
}

.sidebar.collapsed {
  width: 80px;
  transition: all 0.3s;
}

.main-content.collapsed {
  margin-left: 80px;
  transition: all 0.3s;
}

3. Добавьте JavaScript-код, который будет обрабатывать событие клика на кнопку или иконку для скрытия/отображения сайдбара. Например:

$(document).ready(function() {
  $('.sidebar-toggle').click(function() {
    $('.sidebar').toggleClass('collapsed');
    $('.main-content').toggleClass('collapsed');
  });
});

4. Теперь, когда вы нажимаете на кнопку или иконку, классы .collapsed добавляются или удаляются из сайдбара и основного содержимого страницы, что приводит к анимированному сворачиванию или разворачиванию сайдбара.

Теперь у вас есть полностью сворачиваемый сайдбар на Bootstrap. Когда сайдбар свернут, ширина сайдбара уменьшается, а основное содержимое страницы сдвигается вправо. Когда сайдбар развернут, он занимает полный размер и основное содержимое страницы переходит обратно на исходное место.