18 января 2018 года случилось важное событие - вышла из беты четвертая версия bootstrap. Далее мы рассмотрим все нововведения и отличия сетки bootstrap 3 от сетки bootstrap 4.
Технология Flexbox
Новая сетка построена на использовании модели Flexbox для разметки, что дает ощутимые преимущества по сравнению с классической моделью основанной на Float. В настоящее время модель уже имеет поддержку всех современных браузеров, что дает нам возможность использовать сетку в новых проектах.

Параметры сетки по-умолчанию
Сетка по сути осталась прежней, но перенесла некоторые изменения

Появился новый брейкпоинт xl (Extra large)
Новый брейкпоинт который теперь отвечает за разрешение >1200px (xl) . Все остальные сдвинулись на один уровень вниз, и последний, самый нижний, теперь отвечает за разрешение < 576px (xs)
У xs (Extra small) больше нет префикса
Теперь класс нижнего брейкпоинта выглядит так col-n (не пишеться префикс xs)
Пример:
<div class='col-6'>...</div>
вместо
<div class='col-xs-6'>...</div>
Автоматическая разметка колонок
С помощью нового универсального класса .col можно указать до 12 колонок в ряду, ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.

<div class="container">
<div class="row">
<div class="col">
1 из 2
</div>
<div class="col">
2 из 2
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col">
2 из 3
</div>
<div class="col">
3 из 3
</div>
</div>
</div>
Установка ширины одной колонки
Также можно явно установить ширину одной колонки, а остальные остануться автоматическими.

<div class="container">
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-6">
2 из 3 (широкая)
</div>
<div class="col">
3 из 3
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-5">
2 из 3 (широкая)
</div>
<div class="col">
3 из 3
</div>
</div>
</div>
В этом примере второй элемент в первом ряду имеет класс col-6 и он занимает соответствущее количество колонок на всех разрешениях экрана. Ширина остальных колонок в этом ряду вычисляется автоматически, занимая все оставшееся пространство.
Контент переменной ширины
Можно использовать col-[breakpoint]-auto чтобы определить колонку с шириной в зависимости от пространства занимаемого содержимым.

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 из 3
</div>
<div class="col-md-auto">
Контент переменной ширины
</div>
<div class="col col-lg-2">
3 из 3
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-md-auto">
Контент переменной ширины
</div>
<div class="col col-lg-2">
3 из 3
</div>
</div>
</div>
Здесь центральные колонки занимают ширину, соответствующую ширине содержимого. В первом ряду .row имеет класс justify-content-sm-center - весь ряд центрируется и общая ширина складывается из ширины центральной колонки и двух колонок .col-md-2
Второй ряд не имеет центрирующего класса и растягивается на всю ширину, но вторая колонка col-sm-auto имеет ширину в зависимости от содержимого
Мульти-ряд
В новой версии вы можете сделать в одном ряду несколько строк, с помощью переносов, реализовать это можно с помощью класса w-100, который по сути работает как тег <br>, только для колонок

<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Адаптивные классы
Брейкпоинты
Используя упомянутый ранее класс col с добавление количества колонок, например: col-6 можно получить элемент который будет занимать одинаковое количество колонок на всех разрешениях, кроме того эта возможность используется в замену префиксу bootstrap 3 xs
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>

На мобильных устройствах
Используйте префикс класса .col-sm-[n] для того, чтобы задать сетку на всех разрешениях, кроме самых маленьких, на них колонки будут складываться друг под друга.
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>

Создание сложной комбинированной сетки
Вы можете создавать любые комбинации колонок сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью классов.

<!-- На мобильных устройствах: Первая колонка - на полную ширину, вторая на половину -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- На десктопе: 3 колонки по 4 в каждой. На мобильных: все колонки вполовину контейнера -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Колонки занимают 6 из 12 колонок на любом разрешении -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Выравнивание
Вертикальное выравнивание

<div class="row align-items-start">
<div class="col">Верх</div>
<div class="col">Верх</div>
<div class="col">Верх</div>
</div>
<div class="row align-items-center">
<div class="col">Середина</div>
<div class="col">Середина</div>
<div class="col">Середина</div>
</div>
<div class="row align-items-end">
<div class="col">Низ</div>
<div class="col">Низ</div>
<div class="col">Низ</div>
</div>
Соответственно align-items-start выравнивание по верху, align-items-center выравнивание по центру, align-items-end выравнивание по низу
Также вы можете задавать выравнивание отдельным колонкам

<div class="row">
<div class="col align-self-start">Верх</div>
<div class="col align-self-center">Середина</div>
<div class="col align-self-end">Низ</div>
</div>
align-self-start выравнивание по верху, align-self-center выравнивание по центру, align-self-end выравнивание по низу
Горизонтальное выравнивание

<div class="row justify-content-start">
<div class="col-4">row justify-content-start</div>
<div class="col-4">row justify-content-start</div>
</div>
<div class="row justify-content-center">
<div class="col-4">row justify-content-center</div>
<div class="col-4">row justify-content-center</div>
</div>
<div class="row justify-content-end">
<div class="col-4">justify-content-end</div>
<div class="col-4">justify-content-end</div>
</div>
<div class="row justify-content-around">
<div class="col-4">justify-content-around</div>
<div class="col-4">justify-content-around</div>
</div>
<div class="row justify-content-between">
<div class="col-4">justify-content-between</div>
<div class="col-4">justify-content-between</div>
</div>
Удаление полей между колонками
Иногда встречаются ситуации, когда необходимо убрать поля между колонками. Напримеркогда элементы должны быть расположены вплотную. Для этого достаточно у элемента «.row» задать дополнительный класс no-gutters.

<div class="row no-gutters">
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
</div>
Перенос колонок на новую строку
Если ряд row заполняется количеством колонок более 12, то последующая колонка переносится на новую строку.

<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>9 + 4 = 13 колонок - это больше 12. Данный элемент шириной в 4 колонки будет перенесён на новую строку.</div>
<div class="col-6">.col-6<br>Следующие колонки расположатся вдоль строки.</div>
</div>
Порядок элементов
Классы порядка элементов
Для определения порядка элементов можно использовать специальные классы с префиксом order-[n]. Если вы знакомы с версткой на flexbox, данные правила будут вам знакомы. В новом bootstrap у нас есть возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую .order-1.order-md-2

<div class="row">
<div class="col">Первый неупорядоченный элемент</div>
<div class="col order-12">Второй, упорядоченный как последний</div>
<div class="col order-1">Третий, упорядоченный как первый</div>
</div>
Еще можно использовать специальные классы, которые определяют порядок первый и последний элемент order-first, order-last

<div class="row">
<div class="col">Первый неупорядоченный</div>
<div class="col order-last">Второй, упорядоченный как последний</div>
<div class="col order-first">Третий, упорядоченный как первый</div>
</div>
Смещение колонок
Классы смещения
Отступы у колонок можно делать только слева, используя классы offset-[breakpoint]-[n] . Из примера ниже, offset-md-2 сдвинет колонку col-md-4 на 2 колонки вправо.

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Отступ на всех разрешениях можно сбрасывать классом .offset-[breakpoint]-0
Вложенность
Bootstrap 4 поддерживает вложенность элементов. Здесь все работает также, как в третьей версии - чтобы вложить колонки в другие, необходимо создать дочерний элемент с классом row в него и вкладывать колонки.

<div class="row">
<div class="col-sm-9">Уровень 1: col-sm-9
<div class="row">
<div class="col-8 col-sm-6">Уровень 2: col-8 col-sm-6</div>
<div class="col-4 col-sm-6">Уровень 2: col-4 col-sm-6</div>
</div>
</div>
</div>
Мы рассмотрели основные особенности сетки bootstrap 4 и отличия от bootstrap 3. Нововведений много, и на мой взляд, они только положительные.
Также вы можете ознакомиться с документацией фреймворка.