Как сделать чтобы элементы выстраивались в 5 колонки если разрешение больше 993px, а если меньше 993px то в 2 колонки?

Для решения задачи с размещением элементов в 5 колонок при разрешении больше 993px и в 2 колонки при разрешении меньше 993px вам понадобится использовать функциональность Bootstrap Grid System.

Bootstrap предоставляет гибкую систему сетки, состоящую из 12 колонок. Вы можете разделить свой контейнер на столько колонок, сколько вам нужно в зависимости от контекста.

Начнем с создания основного контейнера, который будет содержать ваши элементы. Вам потребуется следующая разметка HTML:

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-3 col-sm-6">
      <!-- Здесь размещается содержимое элемента -->
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
      <!-- Здесь размещается содержимое элемента -->
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
      <!-- Здесь размещается содержимое элемента -->
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
      <!-- Здесь размещается содержимое элемента -->
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
      <!-- Здесь размещается содержимое элемента -->
    </div>
  </div>
</div>

Разберемся с классами колонок:

- col-lg-2 указывает, что каждый элемент будет занимать 2 колонки в диапазоне разрешений, больших или равных 1200px (large screens).
- col-md-3 указывает, что каждый элемент будет занимать 3 колонки в диапазоне разрешений между 992px и 1199px (medium screens).
- col-sm-6 указывает, что каждый элемент будет занимать 6 колонок в диапазоне разрешений между 768px и 991px (small screens).

Таким образом, при разрешении больше 993px каждый элемент будет занимать 2 колонки, а при разрешении меньше 993px каждый элемент будет занимать 6 колонок.

Кроме того, добавьте необходимый CSS для реализации этой разбивки с помощью медиа-запроса. Например:

@media (min-width: 993px) {
  .col-lg-2 {
    width: 20%;
  }
}

@media (max-width: 992px) {
  .col-md-3 {
    width: 33.33%;
  }
}

@media (max-width: 767px) {
  .col-sm-6 {
    width: 50%;
  }
}

Теперь ваш контейнер будет менять свою ширину и разбивку на колонки в соответствии с условиями, указанными в медиа-запросах.

Это лишь один из способов реализации данной задачи в Bootstrap. Вы можете настроить количество колонок и точки разрыва в зависимости от ваших потребностей, используя другие классы и настройки Bootstrap Grid System.