Как сделать адаптацию под устройства bootstrap

Bootstrap уже дает встроенные средства для создания адаптивности веб-сайта под различные устройства. Для этого используются классы сетки и медиа-запросы. Например:

1. Классы сетки, которые позволяют создавать адаптивный дизайн. Например, классы col-sm-, col-md-, col-lg- и т.д. позволяют задавать ширину блоков в зависимости от ширины экрана устройства. Пример:

<div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">Блок 1</div>
      <div class="col-md-6 col-lg-4">Блок 2</div>
      <div class="col-md-12 col-lg-4">Блок 3</div>
    </div>
  </div>

В данном примере блоки будут занимать половину ширины экрана на устройствах среднего и большого размера (md и lg) и всю ширину на устройствах малого размера (sm).

2. Встроенные медиа-запросы Bootstrap для создания дополнительных стилей для разных устройств

@media (max-width: 768px) {
    .navbar {
      background-color: #f8f9fa;
    }
  }

  @media (min-width: 768px) {
    .navbar {
      background-color: #343a40;
    }
  }

В данном примере цвет навигационного меню будет изменяться в зависимости от ширины экрана устройства.