Что такое Bootstrap: сетка, компоненты и подключение Bootstrap 5

Bootstrap — это бесплатный фреймворк с открытым исходным кодом (лицензия MIT) для верстки интерфейсов: набор готовых CSS-классов (сетка, типографика, кнопки, формы, утилиты) и JavaScript-плагинов (модальные окна, выпадающие меню, подсказки). Вы пишете обычный HTML, добавляете к элементам классы вроде row, col-md-6, btn btn-primary — и получаете адаптивную страницу без собственного CSS с нуля. Актуальная ветка — Bootstrap 5.3 (последний релиз 5.3.8 вышел в августе 2025 года).

Ниже — минимальная рабочая страница, разбор подключения, сетки и компонентов, типовые ошибки и критерии, когда Bootstrap лучше не брать. Все примеры проверены на Bootstrap 5.3.8 в Chrome.

Из чего состоит Bootstrap

Три слоя, которые важно не путать:

CSS-часть работает сама по себе: подключили bootstrap.min.css — и карточки, кнопки и сетка уже выглядят как надо. JS-часть нужна только интерактивным компонентам. С пятой версии она написана на чистом JavaScript: jQuery больше не требуется, а для позиционирования всплывающих элементов (выпадающие меню, подсказки, поповеры) используется библиотека Popper.

Минимальная страница на Bootstrap 5

Самый воспроизводимый способ — поставить пакет через npm (нужен Node.js):

mkdir bs-demo && cd bs-demo
npm init -y
npm install bootstrap

Рядом с папкой node_modules создайте index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5: первая страница</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container py-4">
    <h1 class="mb-4">Курсы</h1>
    <div class="row g-3">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">HTML и CSS</h5>
            <p class="card-text">Верстка с нуля.</p>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signup">Записаться</button>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100"><div class="card-body"><h5 class="card-title">JavaScript</h5></div></div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100"><div class="card-body"><h5 class="card-title">React</h5></div></div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="signup" tabindex="-1" aria-labelledby="signupTitle" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title fs-5" id="signupTitle">Запись на курс</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
        </div>
        <div class="modal-body">Окно открыто плагином Modal.</div>
      </div>
    </div>
  </div>

  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Откройте файл в браузере. Что должно получиться (замер в Chrome при разной ширине окна):

• на телефоне (375 px) три карточки идут друг под другом;
• на ширине 800 px — по две в ряд, третья переносится вниз;
• на ноутбуке (1280 px) — все три в один ряд;
• кнопка «Записаться» открывает модальное окно, крестик его закрывает, ошибок в консоли нет.

При этом вы не написали ни одной строки CSS и JavaScript.

Разбор по строкам

• <meta name="viewport" ...> — без него мобильный браузер отрисует страницу как десктопную и уменьшит: адаптивная сетка не сработает.
• <link ... bootstrap.min.css> — в <head>, до ваших собственных стилей, чтобы ваши правила шли позже и могли переопределять Bootstrap.
• bootstrap.bundle.min.js — перед закрывающим </body>. «Bundle» означает, что внутри уже есть Popper. Файл bootstrap.min.js без слова bundle Popper не содержит — его тогда подключают отдельно и раньше.
• data-bs-toggle="modal" и data-bs-target="#signup" — атрибуты, по которым JS-плагин сам находит кнопку и окно. Префикс bs- появился в пятой версии.

Подключение через CDN

Для быстрого прототипа файлы можно не скачивать, а подключить с публичного CDN (на официальном сайте getbootstrap.com приведены готовые теги для jsDelivr). Два правила: фиксируйте точную версию в адресе (bootstrap@5.3.8, а не «последнюю»), и оставляйте атрибуты integrity и crossorigin из официального сниппета. integrity — хеш файла (Subresource Integrity): если содержимое на CDN подменят, браузер откажется его выполнять.

Для рабочего проекта обычно выбирают npm: версия фиксируется в package.json, а сборщик (Vite, webpack) кладет в итоговую сборку только нужное.

Сетка Bootstrap: 12 колонок и контрольные точки

Сетка строится из трех уровней вложенности: container задает ширину и боковые поля, row — строку, col-* — колонки внутри. Ширина строки условно делится на 12 частей: col-6 — половина, col-4 — треть, col-3 — четверть. Под капотом сетка сделана на Flexbox.

Контрольные точки (breakpoints) Bootstrap 5:

Главное правило чтения классов: col-md-6 означает «половина ширины начиная с 768 px и шире», а ниже 768 px действует класс поменьше или колонка растягивается на всю строку. Поэтому в примере стоит цепочка col-12 col-md-6 col-lg-4: одна колонка на телефоне, две на планшете, три на ноутбуке. Такой порядок — от узкого экрана к широкому — и есть подход mobile-first, на котором Bootstrap построен с третьей версии.

Еще пригодятся: g-3 — промежутки между колонками, col без числа делит место поровну, col-auto берет ширину по содержимому.

Граница модели: 12 колонок — соглашение Bootstrap, а не свойство CSS. Число колонок меняется Sass-переменной $grid-columns, а экспериментальный режим на CSS Grid включается переменной $enable-cssgrid. Для сложных двумерных раскладок иногда проще написать свой display: grid, чем подгонять сетку фреймворка.

Компоненты и утилиты

Компоненты — готовые блоки с отступами, состояниями и базовой доступностью: кнопки (btn), карточки (card), навигация (navbar), формы (form-control), уведомления (alert), таблицы, аккордеон, карусель. Утилиты донастраивают блок прямо в HTML: mt-3 — отступ сверху, d-flex — флекс-контейнер, d-none d-md-block — скрыть на телефоне и показать с 768 px.

Часть JS-компонентов работает сразу по data-атрибутам (modal, collapse, dropdown), а подсказки (tooltip) и поповеры из соображений производительности нужно включить вручную:

document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el));

До этого вызова кнопка с data-bs-toggle="tooltip" data-bs-title="Старт в октябре" подсказку не покажет; после — при наведении появится «Старт в октябре». Если в подсказку подставляется текст пользователя, не включайте опцию html: true без необходимости: Bootstrap чистит такой HTML встроенным санитайзером, но надежнее выводить обычный текст.

Темная тема

С версии 5.3 у Bootstrap есть цветовые режимы. Атрибут data-bs-theme="dark" на <html> (или на отдельном блоке) переключает палитру: фон страницы в примере становится темно-серым rgb(33, 37, 41), карточки и модальное окно перекрашиваются автоматически.

Как изменить цвета и стили под свой дизайн

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

Частая ловушка: переопределить --bs-primary в :root и ждать, что кнопки станут другого цвета. Не станут — у .btn-primary цвет зашит в собственную переменную --bs-btn-bg еще при сборке. Проверка в браузере: после :root { --bs-primary: #d63384 } фон кнопки остался rgb(13, 110, 253), после .btn-primary { --bs-btn-bg: #d63384 } — стал rgb(214, 51, 132).

Чтобы сменить основной цвет во всех компонентах сразу, используют исходники на Sass. Файл scss/custom.scss:

$primary: #6f42c1;

@import "bootstrap/scss/bootstrap";

Сборка (пакет sass ставится через npm install sass):

npx sass --load-path=node_modules --quiet-deps scss/custom.scss css/custom.css

В полученном css/custom.css у .btn-primary значение --bs-btn-bg: #6f42c1, и так во всех компонентах с основным цветом. Подключайте этот файл вместо bootstrap.min.css. Dart Sass 1.105 при сборке выводит предупреждение Sass @import rules are deprecated: исходники Bootstrap 5.3 рассчитаны на @import, это предупреждение, а не ошибка, и CSS собирается.

Типовые ошибки

Кнопка из старого урока ничего не делает. В статьях про Bootstrap 4 модальное окно открывают атрибутами data-toggle="modal" data-target="#signup". На Bootstrap 5 такой код молча не работает: клик есть, окна нет, консоль пустая. Исправление — атрибуты с префиксом: data-bs-toggle и data-bs-target. Тот же префикс нужен у data-bs-dismiss.

Выпадающее меню падает с ошибкой. Подключен bootstrap.js (или bootstrap.min.js) без Popper, и на странице есть dropdown. При клике меню не открывается, а в консоли:

Uncaught TypeError: Popper__namespace.createPopper is not a function

В минифицированной сборке имя переменной другое (i.createPopper is not a function), суть та же. Исправление — заменить файл на bootstrap.bundle.min.js или подключить Popper отдельно перед Bootstrap.

Другие симптомы. Стили не применились совсем — во вкладке Network 404 на bootstrap.min.css, путь неверный. На телефоне страница мелкая и колонки не складываются — нет <meta name="viewport">. Свой стиль не перебивает Bootstrap — ваш CSS подключен раньше или у селектора меньшая специфичность.

Когда Bootstrap подходит, а когда нет

Bootstrap не заменяет знание HTML и CSS: при первой нестандартной задаче придется разбираться, как работает Flexbox и откуда взялся отступ.

Коротко об истории версий

Название Twitter Bootstrap встречается в старых материалах; сейчас проект развивается командой сообщества отдельно от компании.

Выводы

• Bootstrap — CSS-фреймворк с JS-плагинами: сетка, готовые компоненты и утилиты, актуальная ветка 5.3, jQuery не нужен.
• Базовое подключение — CSS в <head>, bootstrap.bundle.min.js перед </body> и обязательный <meta name="viewport">.
• Сетка делит строку на 12 колонок; класс col-md-6 действует от 768 px и шире, классы пишут от узкого экрана к широкому.
• Фирменные цвета меняют через Sass-переменные, отдельный компонент — через его CSS-переменные; --bs-primary в :root кнопки не перекрашивает.
• Для админок и прототипов Bootstrap экономит время, для уникального дизайна и SPA чаще выбирают свой CSS или библиотеки под фреймворк.

Где применяется / связь с практикой

FAQ

Можно ли использовать Bootstrap без JavaScript?
Да. Сетка, типографика, кнопки, карточки и утилиты работают только на CSS. JavaScript нужен интерактивным компонентам: модальным окнам, выпадающим меню, подсказкам, аккордеону.

Можно ли смешивать Bootstrap 4 и Bootstrap 5 на одной странице?
Нет, это разные наборы классов и data-атрибутов, и их стили конфликтуют. При переходе обновляют разметку по официальному руководству миграции: префикс data-bs-*, классы ms-* и me-* вместо ml-* и mr-* и другие изменения.

Нужно ли подключать весь Bootstrap, если нужна только сетка?
Нет. В пакете есть отдельный bootstrap-grid.min.css (сетка и часть утилит), а при сборке из Sass можно импортировать только нужные модули.