Bootstrap кажется простым, пока не доходишь до адаптивности — и именно здесь всё начинает складываться в единую систему. Чтобы верстка выглядела аккуратно на любом устройстве, важно понимать три ключевые вещи: точки останова, контейнеры и сетку.

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

Breakpoints (точки останова) в Bootstrap

Точки останова — это такие «контрольные точки» по ширине экрана, которые подсказывают вашему сайту, когда нужно менять расположение блоков. Благодаря им сайт выглядит аккуратно и на телефоне, и на планшете, и на широком мониторе.

Зачем они вообще нужны

Все современные сайты должны быть адаптивными. Bootstrap строится по принципу mobile first, то есть:

1. сначала — минимальные стили для маленьких экранов,
2. затем — постепенное улучшение внешнего вида для больших.

Так CSS получается чище, а сайт — быстрее.

Какие breakpoints есть в Bootstrap

В Bootstrap уже есть шесть стандартных размеров. Их можно менять, но большинству их хватает.

Если вы используете Sass, то всё это живёт в одной простой структуре:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Как работают медиа-запросы

Min-width (чаще всего используем)

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

@include media-breakpoint-up(md) {
  /* стили применятся, когда экран ≥ 768px */
}

После компиляции это превращается в обычный CSS:

@media (min-width: 768px) { ... }

Max-width

Иногда нужно наоборот — применить стили на ширинах поменьше. Например, спрятать что-то на больших экранах.

@include media-breakpoint-down(md) {
  /* ≤ 767.98px */
}

Bootstrap использует числа типа 767.98px, чтобы не было конфликтов на устройствах с дробными пикселями.

Точный диапазон: один breakpoint

Допустим, вам нужны стили только для средних экранов.

@include media-breakpoint-only(md) { ... }

CSS будет таким:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Диапазон между двумя breakpoints

Хотите охватить, например, от среднего до большого? Легко:

@include media-breakpoint-between(md, xl) { ... }

Получится:

@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Containers (контейнеры) в Bootstrap

Контейнеры — это основа любой вёрстки в Bootstrap. Они задают ширину, дают внутренние отступы и помогают красиво выровнять содержимое под разные размеры экрана.

Как это работает

Контейнеры нужны всегда, если вы используете сетку Bootstrap. Они «держат» разметку, чтобы она не растягивалась бесконечно и не прилипала к краям.

Всего есть три типа контейнеров:

• .container — фиксированная ширина, которая меняется на каждом breakpoint.
• .container-{breakpoint} — до указанной точки контейнер занимает 100%, а дальше становится фиксированным.
• .container-fluid — всегда 100% ширины.

Это удобно, потому что вы заранее знаете, как контейнер будет себя вести на разных устройствах.

Как меняются ширины

Подробнее:

• .container расширяется ступеньками,
• .container-{breakpoint} ограничивается только после своей точки,
• .container-fluid всегда тянется на всю ширину.

Обычный контейнер

.container — самый распространённый вариант. Он адаптивный: на разных размерах экрана максимальная ширина меняется автоматически.

<div class="container">
  <!-- Контент -->
</div>

Responsive-контейнеры

Это контейнеры вроде .container-sm, .container-md и так далее.

Логика простая: до определённого breakpoint — ширина 100%, после — фиксированная.

<div class="container-sm">Ширина 100% до sm</div>
<div class="container-md">Ширина 100% до md</div>
<div class="container-lg">Ширина 100% до lg</div>

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

Полностью растянутый контейнер

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

<div class="container-fluid">
  ...
</div>

Хорошо подходит для шапок, подвалов, полноширинных секций и баннеров.

Немного про CSS и Sass

Bootstrap генерирует контейнеры на основе карты максимальных ширин:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Хотите другие размеры — просто меняете эту карту в Sass.

Mixin для создания своих контейнеров

@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

Использование:

.custom-container {
  @include make-container();
}

Удобно, если нужен контейнер с другими отступами или поведением.

Grid system — объяснение простым языком

Сетка Bootstrap — это механизм, который помогает выстраивать элементы страницы в ряды и колонки. Она работает на flexbox, поэтому колонки ведут себя предсказуемо, растягиваются, сжимаются и адаптируются под ширину экрана. Bootstrap использует шесть стандартных брейкпоинтов, чтобы сетка оставалась удобной на любом устройстве.

Основные элементы сетки:

1. контейнер,
2. строка (row),
3. колонки (col-*).

Пример базовой сетки

<div class="container text-center">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Три колонки занимают строку равномерно. Контент по центру благодаря контейнеру.

Как это работает

Breakpoints (уровни адаптивности)

Bootstrap использует шесть диапазонов ширин экрана:

• xs: меньше 576px,
• sm: от 576px,
• md: от 768px,
• lg: от 992px,
• xl: от 1200px,
• xxl: от 1400px.

Колонки работают через min-width. Например, класс .col-sm-4 начнёт действовать на sm и далее (md, lg, xl, xxl). Это позволяет задавать ширину под каждый диапазон экрана.

Containers

Контейнеры определяют максимальную ширину и горизонтальные отступы. Варианты:

• .container — фиксированная ширина по брейкпоинтам,
• .container-fluid — всегда 100% ширины,
• .container-sm, .container-md и другие — 100% до брейкпоинта, затем фиксированные значения.

Rows

Row — это оболочка, внутри которой располагаются колонки. Строка:

• выстраивает колонки в линию,
• контролирует gutters — отступы между колонками,
• обеспечивает корректное выравнивание.

Bootstrap использует отрицательные внешние отступы у строки, чтобы колонки начинали точно от границы контейнера.

Columns

Одна строка разделена на 12 условных колонок. Вы указываете, сколько из них занимает каждая колонка.

• .col-4 — занимает 4/12 ширины строки,
• .col-6 — половина строки,
• .col — ширина делится автоматически между всеми колонками с этим классом.

Проценты позволяют колонкам адаптироваться под ширину экрана.

Gutters (отступы между колонками)

Bootstrap управляет отступами через классы:

• .gx-* — горизонтальные,
• .gy-* — вертикальные,
• .g-* — оба направления,
• .g-0 — убрать все отступы.

Auto-layout columns

Auto-layout означает, что ширина колонок определяется автоматически, если не задан числовой размер.

Примеры равных колонок

<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col">2 of 3</div>
  <div class="col">3 of 3</div>
</div>

Колонки занимают равные доли строки.

Указание фиксированной ширины одной колонки

Можно задавать ширину только одной колонке. Остальные адаптируются под оставшееся пространство.

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col-6">2 of 3 (wider)</div>
  <div class="col">3 of 3</div>
</div>

Вторая колонка занимает половину строки, а две другие делят оставшуюся часть.

Другой вариант:

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col-5">2 of 3 (wider)</div>
  <div class="col">3 of 3</div>
</div>

Здесь вторая колонка фиксирована по ширине, а остальные растягиваются автоматически.

Variable width content

Иногда нужно, чтобы колонка имела ширину не по сетке, а по своему содержимому. Например, если внутри текст разной длины или кнопка. В этом случае используется класс вида:

col-{breakpoint}-auto

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

Пример:

<div class="row justify-content-md-center">
  <div class="col col-lg-2">1 of 3</div>
  <div class="col-md-auto">Variable width content</div>
  <div class="col col-lg-2">3 of 3</div>
</div>

Здесь колонка с col-md-auto подстраивает свою ширину под текст, а остальные две адаптируются под оставшееся пространство.

Responsive classes

Сетка позволяет указывать разные размеры колонок для разных размеров экрана. Для этого Bootstrap использует набор классов:

• col-* — самый маленький экран,
• col-sm-* — маленькие экраны,
• col-md-* — средние,
• col-lg-* — большие,
• col-xl-* — очень большие,
• col-xxl-* — самые большие.

Если указать просто col, колонка растягивается автоматически.

All breakpoints

Если нужно, чтобы сетка была одинаковой на всех устройствах, можно использовать только col и col-*. Например:

<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>

В первом случае колонки равные. Во втором — одна занимает 8/12, другая — 4/12.

Stacked to horizontal

Можно сделать так, чтобы на маленьких экранах колонки располагались вертикально, а начиная с определённого размера — выстраивались в строку. Для этого используются классы col-sm-*.

Пример:

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>

На телефонах колонки идут стопкой. На sm и выше — в одну линию.

Другой пример:

<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>

На маленьких экранах каждая колонка занимает 100% ширины. На sm и выше — делят строку поровну.

Mix and match

Этот подход позволяет комбинировать разные размеры колонок на разных брейкпоинтах.

Пример:

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

На телефоне колонка col-6 занимает половину строки. На md она становится col-md-4 и занимает треть.

Другой пример:

<div class="row">
  <div class="col-6 col-md-4"></div>
  <div class="col-6 col-md-4"></div>
  <div class="col-6 col-md-4"></div>
</div>

На мобильных — две колонки в строке. На md — три.

Простой пример:

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Всегда 2 колонки по 50%.

Row columns

Этот подход позволяет указывать количество колонок прямо строке. Колонки будут автоматически подстраиваться под заданное количество.

Доступные классы:

• row-cols-1
• row-cols-2
• row-cols-3
• row-cols-4
• row-cols-auto

Есть и адаптивные варианты вроде row-cols-sm-*, row-cols-md-*.

Пример двух колонок:

<div class="row row-cols-2">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Три колонки:

<div class="row row-cols-3">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Автоматическая ширина:

<div class="row row-cols-auto">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Адаптивный пример:

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

На мобильных — одна колонка, на sm — две, на md — четыре.

Nesting (вложенность)

Вложенность означает, что внутри любой колонки можно создать новую строку со своей сеткой.

Пример:

<div class="row">
  <div class="col-sm-3">Level 1: .col-sm-3</div>
  <div class="col-sm-9">
    <div class="row">
      <div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
      <div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
    </div>
  </div>
</div>

Правила вложения:

• внутренняя сетка всегда начинается с новой строки,
• сумма колонок внутри строки не должна превышать 12,
• вложенная сетка работает так же, как основная.

CSS и Sass в сетке Bootstrap

Если вы используете Bootstrap через исходники Sass, у вас появляется полный контроль над сеткой. Можно менять переменные, изменять количество колонок, настраивать брейкпоинты, задавать свои ширины контейнеров и gutters. Также доступны mixin’ы, с помощью которых можно создавать собственные классы сетки вместо стандартных col-*, row и т.п.

Весь CSS сетки Bootstrap генерируется именно на основе этих переменных и mixin’ов.

Sass-переменные

За поведение сетки отвечает несколько ключевых переменных.

Количество колонок, ширина отступов и максимальное количество колонок для row-cols-*:

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

• $grid-columns — сколько условных колонок в строке,
• $grid-gutter-width — ширина промежутков между колонками,
• $grid-row-columns — максимум для классов row-cols-*.

Брейкпоинты сетки:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Эти значения используются в колонках, контейнерах и responsive-утилитах.

Максимальные ширины контейнеров:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

На основе этой карты Bootstrap создаёт container, container-sm, container-md и т.д.

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

Sass-mixins для сетки

Mixin — это шаблон для генерации CSS. Вместо того чтобы вручную описывать свойства, вы вызываете @include и получаете готовый блок.

Основные mixin’ы сетки:

@include make-row();          // Аналог row
@include make-col-ready();    // Подготовка элемента к роли колонки
@include make-col();          // Автоматическая ширина или равные части
@include make-col($size);     // Колонка определённого размера
@include make-col-offset($size); // Смещение колонки

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

Пример использования mixin’ов

Ниже пример собственной сетки: контейнер фиксированной ширины и двухколоночный макет, который меняет пропорции на разных брейкпоинтах.

.example-container {
  @include make-container();
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }

  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }

  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

HTML:

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Поведение:

• на небольших экранах обе колонки по 6/12,
• на больших — основная 8/12, вторая 4/12.

То есть вы повторяете поведение стандартной сетки, но используете собственные имена классов.

Настройка сетки

Через Sass можно полностью изменить сетку под себя:

• изменить количество колонок,
• поменять брейкпоинты,
• указать свои ширины контейнеров,
• настроить gutters,
• изменить количество уровней адаптивности.

Процесс всегда один:

1. меняете переменные,
2. пересобираете CSS,
3. получаете новые col-*, row-cols-*, container-* под свои значения.

Колонки и gutters

Три основные переменные:

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

• $grid-columns — определяет дроби (например, 4/12, 8/12),
• $grid-gutter-width — ширина отступов между колонками,
• $grid-row-columns — максимум колонок для row-cols-*.

Grid tiers (уровни сетки)

Можно не только менять значения брейкпоинтов, но и их количество. Например, если вам нужно только 4 уровня:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

В результате:

• меняются точки переключения сетки,
• Bootstrap пересоздаёт классы сетки под новые размеры,
• responsive-классы тоже начинают работать по новым правилам.