Перейти к основному содержанию

Вывод 5 колонок в Bootstrap 5

Урок о том как при помощи Bootstrap 5 сетки вывести блок с пятью колонками.

Содержание

В пятом бутстрапе в отличии от предыдущих верстий есть готовые css классы, позволяющие вывести 5 колонок.

CSS классы

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-sm-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-md-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-lg-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

Напомню немного классы сетки, для каких размеров экранов:

HTML разметка

А теперь пример самой простой реализации.

Столбец 1
Столбец 2
Столбец 3
Столбец 4
Столбец 5
<div class="container">
  <div class="row row-cols-5">
    <div class="col">
      Столбец 1
    </div>
    <div class="col">
      Столбец 2
    </div>
    <div class="col">
      Столбец 3
    </div>
    <div class="col">
      Столбец 4
    </div>
    <div class="col">
      Столбец 5
    </div>
  </div>
</div>

Более сложная реализация 5 колонок

Задача: Нужно на экранах более 992px (lg) вывести 5 колонок, на расширении экрана от 768 до 992px чтобы это складывалось в 3 колонки, а на экранах менее 768px складывалось в 2. 

Решение - сама разметка.

<div class="row row-cols-lg-5">
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
</div>

Вот так легко и просто сделать пяти колончатый макет. Если у вас что то не получается спрашивайте.

Комментарии для сайта Cackle