Bootstrap 4 — cетка и колонки

В Bootstrap экран делится на 12 колонок, независимо от размера экрана. Даже маленький экран старого телефона Bootstrap разобьёт на 12 колонок и будет ими управлять.

Посмотрим, как действует система сеток Bootstrap на разных устройствах с разным размером. Всего поддерживается 5 уровней размеров.

Extra small
Extra small
<576px
Small
Small
≥576px
Medium
Medium
≥768px
large
Large
≥992px
Extra large
Extra large
≥1200px
Максимальная ширина контейнера None (auto) 540px 720px 960px 1140px
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl-
Число колонок 12
Ширина отступа 30px (auto 15px с каждой стороны столбцы)

И сайт и верстка могут подстроиться под любую ширину экрана. На Bootstrap делаются целые сайты или используем отдельно блоки-контейнеры (container) для вставки в код страницы.

Автоматическое расположение колонок — равная ширина столбца

Чтоб задать равную ширину колонок в контейнере используем базовый класс col-sm

1 ячейка из 2
2 ячейка из 2
1 ячейка из 3
2 ячейка из 3
3 ячейка из 3

<div class="container">
  <div class="row">
    <div class="col-sm">
      1 из 2
    </div>
    <div class="col-sm">
      2 из 2
    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      1 из 3
    </div>
    <div class="col-sm">
      2 из 3
    </div>
    <div class="col-sm">
      3 из 3
    </div>
  </div>
</div>

Когда мы не указываем точных размеров области просмотра, то она делится поровну на все ячейки. Каждый уровень начинается с минимального размера области просмотра (col-sm) и автоматически применяется к более крупным устройствам, если не отменен.

Разный размер столбцов в ряду

В одном ряду 12 колонок. Мы можем сами назначать сколько колонок занимает столбец.

Автоматическое расположение

.col-md-3
.col-md-6
.col-md-3

Три столбца разной ширины будут отображаться на устройствах с экраном 720px и более.

 

Столбец с адаптивной шириной

1 из 3
Столбец адаптивной ширины
3 из 3
<div class="container">
  <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>

 

Отображение на разных устройствах: мобильный и настольный

Система сеток Bootstrap v4 имеет пять уровней классов: xs (очень маленький, этот инфикс класса не используется), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать практически любую комбинацию этих классов для создания более динамичных и гибких макетов.

Каждый уровень классов масштабируется, что означает, что если вы планируете установить одинаковую ширину для md, lg и xl, вам нужно только указать md.

.col-6 .col-md-8
.col-6 .col-md-4

В таком варианте разметки на экранах меньше 720px будет 2 колонки равной величины (col-6), а на устройствах с экраном больше 720пкс колонки будут разной величины (col-md-8 и col-md-4)

 

.col-12 .col-md-8
.col-12 .col-md-4

На экранах меньше 720px в ряду будет отображаться 1 колонка (col-12), а на устройствах с экраном больше 720пкс будет 2 колонки и разной величины (col-md-8 и col-md-4)

 

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

В такой разметке колонки на мобильных телефонах (до 720px) занимают 50% ширины экрана (col-6), а на мониторе более 720px будет 3 одинаковые колонки по 33,3% (col-md-4)

В одном ряду 12 колонок. Если в коде используется больше 12-ти колонок, то каждая дополнительная переносится в новую строку.

 

Отображение на мобильном, планшете и мониторе компьютера

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

.col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4

В такой разметке колонки на мобильных и планшетах с экраном до 960px занимают 50% ширины экрана (col-sm-6), а на мониторе более 960px будет 2 разной величины колонки (col-lg-8 и col-lg-4)

 

Пример «от обратного»:

<div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">Текст</div>

Ячейка на мобильных до 576 пкс (col-) и 768 пкс (col-sm-) будет занимать 12 колонок, т.е. всю строку — col-12. На устройствах больше 768пкс и до 992 пкс ячейка занимает 4 колонки (col-md-4), а на устройствах больше 992 пкс (col-lg-) и больше 1200 (col-xl-) ячейка займет 8 колонок.

Данный код можно сократить без потери сути до вот такого:

<div class="col-12 col-md-4 col-lg-8">Текст</div>