Сегодня мы расширим стандартную сетку Bootstrap 4 до 5 колонок и до верстаем блок из прошлого урока.
Расширяем bootstrap сетку до 5 колонок
По умолчанию в бутстрапе нет пяти колончатой сетки, но ее по сути не сложно сделать на основании к примеру 4 колончатой, просто берем все стили и переписываем под 5 колон, соответственно задав новый класс. Все css стили новой сетки можно забрать на githab: github.com/web-revenue/bootstrap4-5col/blob/master/.gitignore/5col.css (актуально для пользователей bootstrap версии ниже 4.4).
Начиная с версии bootstrap 4.4 и выше (в том числе 5+), появились встроенные классы которые позволяют выводить 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>Если вам к примеру на разрешении экрана md нужно чтобы вместо 5 колонок выводить уже к примеру 3, тогда код будет таким.
<div class="container">
<div class="row row-cols-md-5 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>Смотрите подробнее документация по бутстрап сетке.
Ну а теперь можно до верстать наш блок до следующего вида:
для этого добавим следующую html разметку
<div class="row text-center">
<div class="col-lg-5th col-md-4 col-6"><p class="t-zag">20</p><p>СКЛАДОВ<br>ПО РОССИИ</p></div>
<div class="col-lg-5th col-md-4 col-6"><p class="t-zag">1300</p><p>ПОЗИЦИЙ<br>В КАТАЛОГЕ</p></div>
<div class="col-lg-5th col-md-4 col-12"><p class="t-zag FEB238">100%</p><p><span class="FEB238">ГАРАНТИЯ СОБЛЮДЕНИЯ СРОКОВ</span></p></div>
<div class="col-lg-5th col-md-4 col-6"><p class="t-zag">10</p><p>ЛЕТ ОПЫТ<br>РАБОТЫ</p></div>
<div class="col-lg-5th col-md-4 col-6"><p class="t-zag">0,1%</p><p>ОБРАЩЕНИЙ<br>ПО БРАКУ</p></div>
</div>
Примечание: Добавляем после блока с классом well.
Ну и прописываем стили для элементов:
p.t-zag{
font-size:50px !important;/*размер шрифта*/
margin-bottom:1px;/*отступ для элементов от нижнего края*/
padding-top: 20px;/*отступ от верхнего края*/
}
.FEB238{color:#e65950;/*задаем цвет*/}
На сегодня все. Скачать материалы данного урока.
В следующем уроке мы продолжим верстать наш шаблон
