Вывести контент в ряд

Чтобы выводить контент по три элемента в ряд, достаточно родительскому элементу добавить класс .row-cols-{число-элементов-в-ряд}.

<div class="row row-cols-3">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

В результате элементы будут выводиться следующим образом:

На примере выше элементы находятся вплотную. Чтобы задать отступ, используется класс .g-{уровень-отступа}.

<div class="row row-cols-3 g-3">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Результат:

Также можно указать ширину текущего элемента через класс .col-{номер}.

<div class="row">
  <div class="col-4">Элемент 1</div>
  <div class="col-4">Элемент 2</div>
  <div class="col-4">Элемент 3</div>
</div>

Число «4» в имени класса означает размер элемента. В одной строке итоговое значение должно достигать «12». Например, если задать элементам класс .col-6, тогда будут выводиться два элемента в ряд. Если задать .col-12, то будет выводиться по одному элементу в ряд.

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

<div class="row row-cols-3 row-cols-md-4">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Другие варианты (по порядку возрастания размера экрана).

• .row-cols-6 — до 576px;
• .row-cols-sm-6 — больше 576px;
• .row-cols-md-6 — больше 768px;
• .row-cols-lg-6 — больше 992px;
• .row-cols-xl-6 — больше 1200px.

Похожие страницы

• Flex
• Grid
• Bootstrap