Bootstrap 6 Alpha: новые CSS-классы, модульный Sass и JavaScript без UMD

8 октября 2026 года вышла Bootstrap 6 Alpha 1 - первая предварительная версия нового поколения CSS-фреймворка. Команда переработала систему адаптивных классов, перешла на модульную архитектуру Sass, отказалась от UMD-сборок JavaScript и повысила минимальные требования к браузерам. Для разработчиков существующих сайтов это означает не обычное обновление зависимости, а миграцию с изменениями в HTML, стилях, сборке и подключении интерактивных компонентов.

Bootstrap 6 создаётся с расчётом на современные возможности браузеров. Часть задач, для которых раньше требовались дополнительные CSS-правила или JavaScript, теперь решается нативными средствами платформы. Одновременно разработчики пересмотрели механизм настройки внешнего вида: Sass отвечает преимущественно за генерацию структуры и вариантов компонентов, а визуальные параметры вынесены в CSS-переменные.

Альфа-версия доступна в npm под номером 6.0.0-alpha.1. Стабильным релизом её считать нельзя: до бета-версии и последующих этапов стабилизации интерфейсы и внутренние механизмы ещё могут измениться.

Адаптивные классы получили префиксы

Одно из самых заметных изменений Bootstrap 6 затрагивает разметку. В пятой версии обозначение контрольной точки находилось внутри имени класса: например, d-md-none скрывал элемент начиная с контрольной точки md, а col-lg-6 задавал половину ширины строки на больших экранах.

В шестой версии контрольная точка переносится в начало имени и отделяется двоеточием:

//html

<!-- Bootstrap 5 -->
<div class="d-md-none">...</div>
<div class="col-lg-6">...</div>
<div class="opacity-50-hover">...</div>

<!-- Bootstrap 6 -->
<div class="md:d-none">...</div>
<div class="lg:col-6">...</div>
<div class="hover:opacity-50">...</div>

Такой синтаксис распространяется не только на сетку и утилиты отображения. Он затрагивает адаптивные варианты компонентов, состояния элементов и другие классы, использующие контрольные точки или модификаторы. В официальном анонсе команда отдельно приводит замену .offcanvas-md на .md:drawer.

Новая схема напоминает подход, применяемый Tailwind CSS: сначала указывается условие, затем класс, к которому оно относится. Это делает названия более единообразными, особенно когда в одном элементе сочетаются несколько адаптивных правил и состояний.

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

При миграции необходимо проверить HTML-разметку, шаблоны, динамически формируемые имена классов и собственные стили, связанные с прежними селекторами. Отдельного внимания требуют классы, которые собираются из частей строки: автоматическая замена текста в исходниках может не обнаружить такие конструкции.

Изменения касаются и авторских Sass-миксинов. Например, breakpoint-infix() заменён на breakpoint-prefix(). Код, который генерирует собственные адаптивные классы через старые вспомогательные функции, также придётся пересмотреть.

Sass больше не отвечает за все визуальные настройки

В Bootstrap 5 настройка темы во многом строилась вокруг переопределения Sass-переменных до компиляции. Этот подход сохраняется лишь частично. Bootstrap 6 переходит на модульную систему Sass с директивами @use и @forward, а визуальную конфигурацию переносит в CSS custom properties.

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

В новой архитектуре используются карты токенов. Они объединяют CSS-переменные, отвечающие за цвета, отступы, скругления, фон и другие параметры оформления. Отдельные компоненты получают собственные карты, а общие значения задаются на уровне корневых токенов.

Пример конфигурации из нового подхода выглядит так:

//scss

@use "../node_modules/bootstrap/scss/bootstrap" with (
  $enable-smooth-scroll: true,
  $root-tokens: (
    --spacer: 1.5rem,
    --focus-ring-width: 3px,
  ),
  $alert-tokens: (
    --alert-padding-x: calc(var(--spacer) * 2),
    --alert-border-radius: var(--radius-8),
  ),
);

Здесь меняются общие параметры оформления и настройки компонента Alert. При этом значения, связанные с визуальным представлением, больше не ограничены исключительно этапом компиляции Sass.

После генерации CSS-переменные можно переопределять непосредственно в браузере. Если несколько компонентов используют общий токен отступа, изменение его значения позволяет согласованно обновить их оформление без повторной компиляции всего набора стилей.

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

При этом Sass не исчезает. Он по-прежнему используется для программной генерации утилит, вариантов компонентов и других конструкций, требующих обработки на этапе сборки. Разделение проходит по назначению: Sass управляет генерацией, CSS-переменные - визуальными значениями.

В Bootstrap 6 также изменена организация исходных файлов. Прежняя схема с variables.scss, variables-dark.scss и maps.scss больше не сохраняется в прежнем виде. Часть глобальных настроек распределена между config.scss, colors.scss и theme.scss.

Есть и ещё одно важное отличие: префикс CSS-переменных больше не настраивается старой Sass-переменной $prefix. В новой архитектуре пространство имён задаётся на этапе PostCSS. Поэтому собственная сборка Bootstrap может потребовать изменений не только в Sass, но и в конфигурации обработки CSS.

CSS получает больше возможностей от браузера

Bootstrap 6 активнее использует современные стандарты CSS вместо собственных обходных решений. В обновлении появились слои каскада, контейнерные запросы, новые цветовые функции и синтаксис диапазонов медиавыражений.

@layer позволяет распределять правила по слоям с предсказуемым порядком приоритета. Bootstrap использует эту возможность для организации стилей компонентов и утилит. В частности, слой utilities располагается выше остальных слоёв фреймворка, что влияет на разрешение конфликтов между правилами.

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

Цветовая система также стала современнее. oklch() позволяет работать с цветом в пространстве, ориентированном на воспринимаемую светлоту и насыщенность. Функция color-mix() даёт возможность получать промежуточные цвета, а light-dark() помогает задавать значения для светлого и тёмного режимов непосредственно в CSS.

Это уменьшает необходимость хранить отдельные наборы правил для каждой темы. При изменении базовых цветов зависимые значения могут вычисляться браузером, а не генерироваться заранее отдельными Sass-выражениями.

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

Для медиавыражений Bootstrap 6 использует диапазонный синтаксис, например (width >= 768px), вместо традиционных комбинаций min-width и max-width.

Все эти возможности расширяют выразительность CSS, но одновременно повышают требования к браузерам. Команда больше не стремится обеспечивать совместимость с устаревшими версиями через набор префиксов, полифиллов и запасных правил.

Интерактивные компоненты переходят на нативные элементы

Bootstrap 6 использует возможности HTML и CSS там, где они позволяют обойтись без дополнительной JavaScript-логики.

Например, основой компонента Accordion стали нативные элементы <details> и <summary>. Их раскрытие и закрытие работает без JavaScript, а состояние компонента поддерживается самим браузером. Для анимации Bootstrap также использует новые CSS-возможности, включая ::details-content, interpolate-size и дискретные переходы.

Вместо полностью самостоятельной реализации диалогового окна появился компонент Dialog, основанный на HTML-элементе <dialog>. Это позволяет использовать встроенные механизмы браузера для работы с диалогами.

Такой переход меняет подход к разработке компонентов. Часть поведения, которую раньше приходилось реализовывать обработчиками событий, управлением состоянием и дополнительной разметкой, теперь обеспечивается платформой. Это не означает, что JavaScript больше не нужен: он по-прежнему необходим для бизнес-логики, программного управления состоянием и взаимодействия с приложением.

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

JavaScript становится ESM-only

Ещё одно принципиальное изменение - отказ от UMD-сборок и глобального объекта window.bootstrap. В Bootstrap 6 JavaScript-компоненты поставляются в формате ES Modules.

Для проектов с современными сборщиками это изменение может оказаться сравнительно простым. Импорты вида import { Tooltip } from 'bootstrap' продолжают использоваться, а метаданные пакета позволяют корректнее исключать ненужный код при сборке.

Сложнее ситуация у приложений, которые подключали Bootstrap через глобальный объект, использовали CommonJS require() или рассчитывали на UMD-файл. Такой код необходимо перевести на модульную схему.

При подключении готовой сборки через CDN используется type="module":

//html

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css"
  rel="stylesheet"
>

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"
></script>

Если приложение обращается к JavaScript API компонента, вместо глобального объекта потребуется явный импорт. При использовании CDN команда Bootstrap предлагает импортировать нужные компоненты из соответствующего модульного файла.

Для проектов, в которых интерактивность Bootstrap ограничена стандартными атрибутами data-bs-*, переход проще: при корректном подключении модульной сборки эти атрибуты продолжают работать.

Вместе с JavaScript обновился и исходный код библиотеки: он написан на TypeScript, а пакет включает собственные декларации типов. Это позволяет проектам отказаться от отдельной зависимости @types/bootstrap, если она использовалась исключительно для типизации Bootstrap.

Изменилась и инфраструктура разработки самого фреймворка. В качестве инструментария сборки используется Rolldown вместо Rollup и Babel, а тестирование выполняется через Vitest с запуском реального Chromium посредством Playwright. Эти изменения в основном интересны тем, кто собирает Bootstrap из исходников или участвует в его разработке.

Минимальные требования к браузерам выросли

Bootstrap 6 требует Chrome и Edge версии 130 или новее, Firefox 132 и Safari 18. Для сравнения, Bootstrap 5 поддерживал существенно более старые браузеры, включая Chrome и Firefox 60, а также Safari 12.

Разница объясняется использованием современных CSS- и HTML-возможностей без обязательного сохранения совместимости с прежними реализациями. Команда указывает среди используемых технологий контейнерные запросы, :has(), oklch(), color-mix(), light-dark() и нативный <dialog>.

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

Здесь важно учитывать не только возможность загрузить страницу. Если браузер не поддерживает используемые CSS-функции, отдельные части интерфейса могут отображаться иначе. Поскольку Bootstrap 6 не предусматривает прежний набор резервных решений для старых версий, совместимость необходимо оценить до перехода.

Bootstrap 5 при этом не исчезает. Команда сообщила, что версия 5 останется доступной и продолжит поддерживаться; обновление 5.4.0 планируется выпустить до объявления даты окончания жизненного цикла пятой ветки.

Как подготовить существующий проект к миграции

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

В первую очередь нужно найти старые адаптивные классы и проверить собственные Sass-переопределения. Затем следует пересмотреть сборку CSS: переход на модульный Sass и новая настройка префикса могут потребовать изменений в конфигурации PostCSS.

Отдельный этап - JavaScript. Нужно выявить обращения к window.bootstrap, вызовы через require(), подключение UMD-файлов и собственные обёртки вокруг компонентов. Для каждого такого места потребуется определить эквивалент в модульной архитектуре.

Наконец, необходимо проверить браузерную совместимость и поведение компонентов, которые теперь используют нативные элементы HTML. Проверка должна охватывать не только внешний вид, но и клавиатурную навигацию, открытие и закрытие диалогов, работу раскрывающихся областей и пользовательские обработчики событий.

Для первого знакомства с шестой версией достаточно установить альфа-релиз в отдельную ветку проекта:

//bash

npm install bootstrap@6.0.0-alpha.1

Использовать такую версию в рабочем приложении без отдельного тестирования не стоит. Альфа-релиз предназначен для проверки нового направления развития и сбора обратной связи, а не для гарантированно стабильной эксплуатации.

Что означает выход Bootstrap 6

В шестой версии Bootstrap меняет не одну подсистему, а сразу несколько уровней разработки интерфейса. Новый синтаксис классов влияет на HTML, модульный Sass - на настройку и сборку стилей, ESM-only JavaScript - на подключение компонентов, а повышение минимальных требований к браузерам - на совместимость готового продукта.

Для новых проектов эти решения дают возможность строить интерфейсы на современных возможностях веб-платформы. Для существующих приложений стоимость перехода определяется количеством старой разметки, собственных Sass-настроек и зависимостей от прежнего JavaScript API.

Пока Bootstrap 6 находится на стадии Alpha, разработчикам стоит изучить новую архитектуру и проверить совместимость на отдельной ветке, не планируя массовое обновление только на основании выхода первой версии. До стабилизации синтаксис и API ещё могут измениться.