Подключаем сетку бутстрапа к теме

Для многих создание сеток для сайта является насущной проблемой. Основная проблема в том, что сеточные элементы должны быть адаптированными под разные размеры экранов, желательно чтобы сам программист мог указать при каких расширениях как должны выстраиваться элементы. В html для этого используется FlexBox, который ужасно неудобен из-за своей ограниченности и необходимости писать дополнительные правила для каждого расширения.

Выходом из ситуации видится применение системы сеток от бутстрапа, но основная проблема в том, что если подключить бутстрап к вордпрессу, то верстка съезжает.

Сегодня я покажу, как я использую сетку бутстрапа на вордпрессе без проблем для обоих.

В бутстпрапе существует набор css файлов

Если подключать их к вордпрессу используя cdn то вёрстка будет кривой, особенно в меню. Но в этих файлах есть 1, который отвечает именно за сеточную модель бутстрапа и как раз только его мы будем использовать.

Нас интересует файл bootstrap-grid.css

Когда вы скачаете архив с бутстрапом с официального сайта ( ссылка ), то в папке css вы найдёте нужный файл. Его нужно перенести в любое место в любую папку с файлами вашего сайта, например в папку wp-content/themes/colormag/css или в корень сайта — это не имеет никакого значения. Запомните путь к файлу.

Теперь откройте footer и в самом конце перед закрывающимся </body> с новой строки пропишите путь к вашему файлу в виде линка и отредактируйте путь к файлу:

<link rel="stylesheet" href="https://colormag.info/wp-content/themes/colormag-pro/css/bootstrap-grid.css">

Вот и всё. Теперь вы можете использовать мобильную сетку бутстрапа для создания макетов всех форм и размеров.

Вот пример. Создадим оглавление для статьи, на которое в последствии можно будет повесить якоря.

<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3"><a>Основы</a></div>
<div class="col-12 col-md-6 col-lg-3"><a>Задачи</a></div>
<div class="w-100"></div>
<div class="col-12 col-md-6 col-lg-3"><a>Примеры</a></div>
<div class="col-12 col-md-6 col-lg-3"><a>Заключение</a></div>
</div>
</div>

Так же можно сделать блоки с иконками, картинками, всем, чем угодно и указать свои условия отображения для разных размеров экранов.

Результат: