Расширяем сетку Bootstrap 4 до 5 колонок

Расширяем bootstrap 4 сетку до 5 колонок bootstrap

Сегодня мы расширим стандартную сетку 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>

Смотрите подробнее документация по бутстрап сетке.

Ну а теперь можно до верстать наш блок до следующего вида:

расширяем блок и добавляем сетку для 5 блоков

для этого добавим следующую 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;/*задаем цвет*/}

На сегодня все. Скачать материалы данного урока.

В следующем уроке мы продолжим верстать наш шаблон

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
Web-Revenue.ru
Добавить комментарий