Что нового в Bootstrap 5

Зависимости

• Отказ от jQuery
• Переход с Popper v1 на Popper v2

• Переход на Dart Sass
• Перенос документации с Jekyl на Hugo

Прекращение поддержки браузеров

• Internet Explorer 10 and 11
• Microsoft Edge < 16 (Legacy Edge)
• Firefox < 60
• Safari < 12
• iOS Safari < 12
• Chrome < 60

Сетка

• Добавлен новый брейкпоинт xxl для размеров экранов на 1400px и более.
• Отступы между колонок теперь задаются в rem (1.5rem или примерно 24px, вместо 30px). Теперь:
  • Появились новые классы .g-*, .gx-* и .gy-*, чтобы задавать вертикальные/горизонтальные отступы.
  • Вместо .no-gutters теперь .g-0
• У колонок больше не задан по умолчанию position: relative, поэтому если нужно вернуть такое поведение, то воспользуйтесь классом .position-relative
• Удалены некоторые классы .order-*, которые редко использовались. Остались только классы с .order-1 до .order-5.
• Удален компонент .media
• box-sizing: border-box теперь используется только в bootstrap-grid.css, вместо глобального.

Контент

• Добавлены два новых размера для заголовков .display-5 и .display-6
• Ссылки подчеркиваются по умолчанию (не только при наведении), если не являются частью определенных компонентов
• Переработан дизайн таблиц. К тегу table можно применять классы цвета бордера table.table.table-bordered.border-primary
• Вложенные таблицы больше не наследуют стили
• Удалены классы .thead-light и .thead-dark в пользу классов .table-*, которые можно применять ко всем элементам таблицы (thead, tbody, tfoot, tr, th, td)
• Удален класс .pre-scrollable
• Удален класс .text-justify
• Для списков <ul> и <ol> стандартный браузерный padding-left сброшен с 40px на 2rem

Формы

• Добавлены плавающие label
• .custom-* стили объединены с обычными
  • .custom-check теперь .form-check
  • .custom-check.custom-switch теперь .form-check.form-switch
  • .custom-select теперь .form-select
  • .custom-file и .form-file заменены на стили выше в .form-control
  • .custom-range теперь .form-range
  • Удален класс .form-control-file и .form-control-range
• Удалены .input-group-append и .input-group-prepend
• Удалены классы форм для сетки. Используйте обычные классы сетки вместо .form-group, .form-row, .form-inline
• label в формах теперь требует наличия класса .form-label
• .form-text больше не задает свойство display
• Иконки валидации больше не применяются к <select> с классом multiple

Accordion

Добавлен новый компонент

Alerts

В примерах теперь используются иконки

Badges

• Используйте классы свойств background вместо .badge-* (например, .bg-primary вместо .badge-primary)
• Используйте .rounded-pill вместо .badge-pill—use
• Удалены состояния hover и focus для бейджей внутри ссылок и кнопок
• Увеличены стандартные отступы padding для бейджей с .25em/.5em на .35em/.65em

Хлебные крошки

• Упрощено стандарнтое представление хлебных крошек. Удалены стили padding, background-color, border-radius
• Добавлено новое кастомное свойство CSS - --bs-breadcrumb-divider для изменения без компиляции CSS.

Кнопки

• Toggle кнопки, включая checkboxes или radio. Больше не требуют JavaScript и получили новую разметку.
• Удален класс .btn-block из утилит. Если требуется, то оборачивайте кнопки в .d-grid и .gap-*.
• Обновлены стили для более контрастных состояний hover и active
• Отключенные кнопки теперь получили свойство pointer-events: none;

Card

• Удален класс .card-deck. Оберните карточку в класс колонок и добавьте родительский .row-cols-* контейнер для создания серий карт.
• Удален класс .card-columns

Слайдеры (Carousel)

• Добавлен .carousel-dark вариант с темными текстом и индикаторами