Как сделать адаптацию под устройства 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;
     }
   }
   

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