В пятом бутстрапе в отличии от предыдущих верстий есть готовые 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%;
}Напомню немного классы сетки, для каких размеров экранов:
- xl - min-width: 1200px
- lg - min-width: 992px
- md - min-width: 768px
- sm - min-width: 576px
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>Вот так легко и просто сделать пяти колончатый макет. Если у вас что то не получается спрашивайте.