Переход на v4

Bootstrap 4 был почти полностью переписан. Наиболее заметные и важные изменения приведены непосредственно ниже.

Стабильные изменения

Бета-3 версия и стабильный релиз v4.x не имеют значительных различий, но есть некоторые заметные изменения.

Печать

  • Исправлены неработающие утилиты печати. Раньше при использовании класса .d-print-* он «перебивал» любой другой класс .d-*. Сейчас они коррелируют с другими утилитами отображения и применяются лишь к их медиа запросами (@media print).

  • Расширены доступные утилиты печати для нормальной работы с другими утилитами. Бета-3 и более ранние версии имели лишь block, inline-block, inline и none. В стабильной вер. 4 добавлены flex, inline-flex, table, table-row и table-cell.

  • Исправлено отображение предварительного просмотра печати в браузерах с новыми стилями печати, которые определены в @page size.

Изменения в бета-3

Хотя в бета-2 было много важных изменений в его бета-фазе, однако некоторые недостатки перекочевали в релиз 3. Эти изменения применяются, если вы обновляете бета-2 или более раннюю версию до бета-3.

Разное

  • Удалена неиспользуемая переменная $thumbnail-transition. Это был лишний код.
  • Пак npm больше не включает в себя ничего, кроме исходников и файлов dist. Если ваш проект зависел от них и вы запускали скрипты через node_modules, придется реадаптировать ваш проект.

Формы

  • Переписаны обычные, существовавшие по умолчанию, чекбоксы и «радио» кнопки. Сейчас они оба имеют совпадающую HTML-структуру (внешние <div> с «детьми» <input> и <label>), и одинаковые стили разметки (вертикально по умолчанию, строчно – с классами-модификаторами). Это позволяет стилизовать лейблы, основываясь на состоянии формы ввода, и упрощает поддержку атрибута disabled (которому раньше требовался родительский класс), а также дает возможность оптимизировать поддержку форм валидации.

    В согласии с описанным мы изменили CSS, управляющий множественными background-image в формах чекбокса и кнопках «радио». В предыдущей версии существовал ныне отсутствующий элемент класса .custom-control-indicator, который отвечал за цвет фона, градиент и SVG-иконку. В старых версиях настройка градиента фона означала замещение всех фонов всякий раз, когда вам требовалось изменить лишь один. Сейчас у нас есть .custom-control-label::before для вида заполнения и градиента и .custom-control-label::after, который взаимодействует с иконкой.

    Для создания обычного строчного элемента проверки, добавьте класс .custom-control-inline.

  • Вместо [data-toggle="buttons"] { } для задания стиля и поведения, мы используем атрибут data для JS, а также новый класс .btn-group-toggle для стилизации.

  • Удален класс .col-form-legend в пользу слегка улучшенного .col-form-label. Поэтому классы .col-form-label-sm и .col-form-label-lg легко можно использовать в элементах <legend>.

  • Обычные формы загрузки файлов изменились в своей переменной Sass $custom-file-text. Это больше не вложенная карта Sass, теперь она управляет лишь кнопкой Browse, поскольку та стала единственным псевдо-элементом, созданным из нашей карты Sass. Текст Choose file теперь содержится в классе .custom-file-label.

Группы ввода

  • Аддоны групп ввода теперь связаны с их размещением относительно каждого ввода. Мы заменили классы .input-group-addon и .input-group-btn двумя новыми: .input-group-prepend и .input-group-append. Теперь вы должны использовать их явно, что упрощает CSS. В дополнение или добавление разместите свои кнопки, как они бы существовали где-либо еще, но оберните текст в .input-group-text.

  • Теперь стали поддерживаться стили валидации, а также формы ввода с возможностью множественного выбора (хотя в них вы можете выбрать и всего одно значение).

  • Классы размеров должны располагаться в родительской группе класса .input-group и не должны быть в отдельных элементах форм.

Изменения в бета-2

В бета-2 мы не хотели вносить разительных изменений. Однако, планы изменились. Ниже перечислены важнейшие изменения, на которые надо обратить внимание при переходе с бета-1 на бета-2.

Изменения

  • Мы удалили переменную $badge-color и его связь с .badge. Мы используем функцию контраста цвета для взаимодействия с color, основанным на background-color, так что переменная стала ненужной.
  • Переназвали функцию grayscale() как gray(), чтобы избежать серьезного конфликта с нативным фильтром CSS grayscale.
  • Переназвали .table-inverse, .thead-inverse и .thead-default как .*-dark и .*-light, чтобы они совпадали с нашими цветовыми схемами, которые используются везде.
  • Отзывчивые таблицы теперь генерируют классы для каждого брейкпойнта сетки. Это коренным образом различается с практикой в бета-1 в том, что класс .table-responsive, который вы используете, стал больше похож на .table-responsive-md. Теперь вы можете использовать классы .table-responsive или .table-responsive-{sm,md,lg,xl}, как удобно.
  • Мы удалили поддержку Bower, т.к. менеджер пакетов устарел (более новые - Yarn or npm). Смотри здесь.
  • Bootstrap все еще требует jQuery 1.9.1 или выше, но мы советуем использовать версию 3.х, т.к. браузеры, поддерживаемые этими версиями, поддерживаются и Bootstrap; к тому же версии 3.х лучше с т.зр. безопасности.
  • Мы удалили неиспользуемый класс .form-control-label. Если вы использовали его, замените его классом .col-form-label, который вертикально центрировал элемент <label> с его связанными формами ввода в разметке горизонтальных форм ввода.
  • Миксин color-yiq, который включал свойство color, теперь стал функцией, которая возвращает значение, позволяющее вам использовать его как свойство CSS. Например, вместо color-yiq(#000), используйте color: color-yiq(#000);.

Подсветка

  • Мы ввели новое использование pointer-events на модальных элементах. Внешний .modal-dialog итерируется по событиям со свойством pointer-events: none для обычной обработки клика (и делает возможным отслеживание и обработку кликов на элементе класса .modal-backdrop), и затем передает их активному на тот момент элементу класса .modal-content с pointer-events: auto.

Итог

Вот список крупнейших различий, о которых надо знать при переходе с v3 на v4.x.

Поддержка браузеров

  • Исключили поддержку IE8, IE9 и iOS 6. v4.x поддерживает только IE10+ и iOS 7+. В версиях ниже используйте v3.
  • Добавили официальную поддержку Android v5.0 Lollipop’s Browser и WebView. Более ранние версии Android Browser и WebView поддерживаются лишь неофициально.

Глобальные изменения

  • Флексбокс включен по умолчанию.
  • Мы переключились с Less на Sass в наших исходниках CSS.
  • rem стало главной единицей в CSS, вместо px, хотя пиксели еще используются для медиа-запросов и поведения сетки, т.к. размеры видимости устройств не имеют типового размера.
  • Глобальный размер шрифта увеличен с 14px до 16px.
  • Поправлены ярусы сеток – добавлен пятый параметр (обращающийся к меньшим устройствам на 576px и ниже), и удален инфикс -xs из таких классов, например: .col-6.col-sm-4.col-md-3.
  • Заменена отдельная тема на настраиваемые через SCSS переменные (например, $enable-gradients: $enable-gradients: true).
  • Система «сборки» перенаправлена с Grunt на использование серий скриптов npm. Смотри package.json для всех скриптов, или наш FAQ.
  • Использование Bootstrap в «неотзывчивом» стиле больше не приветствуется.
  • Мы удалили онлайн-настройщика в пользу более подробной документации и настраиваемых сборок.
  • Добавлены десятки новых классов-утилит, созданных на парах «свойство-значение» в CSS и сочетания margin/padding.

Система сеток

  • Перешли на флексбокс.
    • Добавлена поддержка флексбокса в сеточных миксинах и предопределенных классах.
    • Как часть флексбокса, - добавлена поддержка вертикальных и горизонтальных классов выравнивания.
  • Обновленные название классов сетки и новый ярус сетки.
    • Добавлен новый ярус сетки sm (для 768px и ниже) для более точного контроля. Сейчас в Bootstrap есть xs, sm, md, lg и xl. Это значит, что каждый ярус v3 в Bootstrap «поднялся» на уровень вверх (так, .col-md-6 в v3 стал .col-lg-6 в v4 ).
    • Классы сеток xs изменены – теперь им не требуются инфикс, что дает большую наглядность точке начала их применения при min-width: 0, а не при неких пиксельных значениях. Класс .col-xs-6 стал .col-6. Все другие ярусы сеток требуют инфикс (т.е. sm).
  • Обновлены размеры сеток, миксины, переменные.
    • Пространство между контентом сеток получило карту Sass, так что теперь вы можете задать его ширину на каждом брейпкойнте.
    • Обновленные миксины сеток используют make-col-ready и make-col для задания flex и max-width в отдельной колонке.
    • Изменилась брейкпойнты медиа-запросов системы сеток и ширины контейнеров, что учитывает новые ярусы сеток и дает колонкам возможность ровно разделиться на 12 частей в их максимальной ширине.
    • Брейкпойнты сеток и ширины контейнеров теперь обрабатываются через карты Sass ($grid-breakpoints и $container-max-widths), тогда как прежде это делалось через множество раздельных переменных. Они полностью заменяют переменные @screen-* и позволяют полностью настраивать уровни сетки.
    • Медиа-запросы также изменились. Вместо повторного объявления медиа-запросов через одинаковую переменную, сейчас мы имеем @include media-breakpoint-up/down/only. Также, вместо написания @media (min-width: @screen-sm-min) { ... }, стало возможным писать так: @include media-breakpoint-up(sm) { ... }.

Компоненты

  • Убраны панели, тамбнейлы, «вдавленность» - функционалы которых получил новый компонент – карточка.
  • Убрали шрифт иконок Glyphicons. Если вам нужны иконки, вот параметры:
    • новая версия Glyphicons
    • Octicons
    • Font Awesome
    • Смотри Extend page для списка альтернатив иконкам. Есть предложения? Задайте вопрос в сообществе или PR.
  • Убран плагин Affix jQuery.
    • Мы рекомендуем использовать вместо него position: sticky. Смотрите здесь подробности и специфические многосторонние рекомендации. Также при применении данной фичи предлагаем использовать правило @supports (например @supports (position: sticky) { ... })/
    • Если вы пользовались Affix для применения дополнительных стилей без указания свойства position, полифиллы могли не поддерживаться. Решением для такого случая может быть сторонняя библиотека ScrollPos-Styler.
  • Убраны pager components, т.к. они мало подвергались настройке.
  • Пересмотрены почти все компоненты – теперь они используют не подробно описанные селекторы вложенных элементов, а селекторы классов, выделенных из «родительских» элементов.

Изменения по компонентам

Здесь мы опишем ключевые изменения в компонентах v4.x по сравнению с v.3.

Ребут

Reboot – новая для v.4 «библиотека» CSS, которая опирается на Normalize и работает с определенными вами «стилями сброса». Селекторы, существующие в этом файле, используют только элементы – тут нет классов. Это изолирует наши «стили сброса» от наших стилей компонентов, создавая более модульный подход. Вот некоторые из важнейших «сбросов» в Reboot: box-sizing: border-box, которое теперь перешло с em на rem во многих элементах; стили ссылок, а также «сбросы» многих элементов.

Типографика

  • Все классы-утилиты .text- теперь находятся в _utilities.scss.
  • Избавились от .page-header, поскольку все его стили, кроме границ, можно применить через классы-утилиты.
  • Избавились от .dl-horizontal, вместо которого теперь используется .row в <dl>, а также классы колонки сетки (или миксины) на «дочерних» элементах <dl>: <dt> и <dd>.
  • Стандартная стилизация элемента <blockquote> перемещена в класс .blockquote и класс-модификатор .blockquote-reverse.
  • .list-inline теперь требует, чтобы все его «дочерние» элементы списка имели новый класс .list-inline-item.

Изображения

  • Класс .img-responsive переименован в .img-fluid.
  • Класс .img-rounded переименован в .rounded.
  • Класс .img-circle переименован в .rounded-circle.

Таблицы

  • Почти все экземпляры селектора > перемещены, т.е. вложенные таблицы теперь не будут автоматически наследовать стили от своих «предков». Это значительно упрощает наши селекторы и потенциальные настройки.
  • Переименован класс .table-condensed в .table-sm (для большей компактности).
  • Добавили новый параметр .table-inverse.
  • Добавили модификаторы заголовком таблиц .thead-default и .thead-inverse.
  • Переименовали контекстуальные классы – теперь они имеют префикс .table-. Поэтому .active, .success, .warning, .danger and .info стали соответственно .table-active, .table-success, .table-warning, .table-danger и .table-info.

Формы

  • Переместили «сбросы элементов» в файл _reboot.scss file.
  • Переименовали .control-label в .col-form-label.
  • Переименовали .input-lg и .input-sm в .form-control-lg и .form-control-sm соответственно.
  • Ради упрощения убраны классы .form-group-*. Используйте теперь вместо них .form-control-*.
  • Вместо класса .help-block теперь .form-text для вспомогательного текста блока. Для встроенного текста справки и других гибких параметров используйте служебные классы, такие как .text-muted.
  • Убрали классы .radio-inline и .checkbox-inline.
  • Совместили классы .checkbox и .radio в .form-check и различные классы .form-check-*.
  • Горизонтальные формы капитально изменены:
    • Теперь не требуется класс .form-horizontal.
    • .form-group теперь не применяет стили из класса .row через миксин, так что .row теперь требуется для разметки с горизонтальной сеткой (например, <div class="form-group row">).
    • Добавлен новый класс .col-form-label который вертикально центрирует лейблы относительно .form-control.
    • Добавлен новый класс .form-row для создания компактных разметок форм с классами сеток (замените .row на .form-row).
  • Добавили поддержку стандартных форм (для чекбоксов, «радио», кнопок выбора, загрузки файлов).
  • Заменили .has-error, .has-warning и .has-success формами валидации на HTML5, которые работают через псевдо-классы CSS3 :invalid и :valid.
  • Переименовали .form-control-static в .form-control-plaintext.

Кнопки

  • Переименовали .btn-default в .btn-secondary.
  • Полностью убран класс .btn-xs т.к. в версии 4 пропорции класса .btn-sm намного меньше, чем в версии 3.
  • Опция stateful button в button.js jQuery убрана, как и методы $().button(string) и $().button('reset'). Мы советуем использовать вместо них чистый JavaScript, что даст преимущество в настройке и точности поведения кода.
    • Заметим, что другие возможности jQuery (чекбоксы кнопок, «радио», одиночные кнопки изменения состояния) сохранены в версии 4.
  • Изменили атрибут кнопок: [disabled] стал :disabled т.к. последний поддерживается IE9. Однако параметр fieldset[disabled] по-прежнему необходим, потому что встроенные отключенные поля по-прежнему не работают в IE11.

Группы кнопок

  • Переписали этот компонент на флексбоксе.
  • Удалили .btn-group-justified. В качестве замены оборачивайте элементы класса .w-100 в <div class="btn-group d-flex" role="group"></div>.
  • В связи с удалением .btn-group-xs полностью удален также .btn-xs.
  • Удалили явные расстояния между группами кнопок в панелях инструментов кнопок, теперь вместо них используйте утилиты марджина.
  • Улучшена документация по данным элементам.
  • Таковые теперь «переключены» из «родительских» селекторов в одиночные классы для всех компонентов, модификаторов, т.д.
  • Упрощены стили выпадающих элементов – теперь в выпадающих элементах нет прикрепленных к выпадающему меню стрелочек, направленных вверх или вниз.
  • Выпадающие элементы теперь можно создавать в <div> или <ul>.
  • Переписаны стили и разметка выпадающих элементов, для более легкой, встроенной поддержки созданных на <a> и <button> составных частей выпадающих элементов.
  • Переименовали .divider в .dropdown-divider.
  • Составные части выпадающего элемента теперь требуют класса .dropdown-item.
  • Тогглеры выпадающих элементов больше не требуют явного <span class="caret"></span>, теперь функционал этого span создается автоматически через ::after в элементе .dropdown-toggle.

Система сеток

  • Брейкпойнт сетки sm теперь включается при 576px, что означает, что фактически теперь существует 5 «ярусов» (xs, sm, md, lg и xl).
  • Переименованы классы-модификаторы отзывчивой сетки – из .col-{breakpoint}-{modifier}-{size} в .{modifier}-{breakpoint}-{size} – для большей простоты.
  • Вместо классов-модификаторов “push” и “pull” – теперь классы order, работающие на флексбоксе. Например, вместо .col-8.push-4 и .col-4.pull-8 теперь следует пользоваться .col-8.order-2 и .col-4.order-1.
  • Добавлены обычные классы флексбокса для сеточной системы и ее компонентов.

Группы списков

  • Переписали этот компонент на флексбоксе.
  • Для стилизации ссылок и кнопок, созданных на основе групповых элементов списка, заменили a.list-group-item на .list-group-item-action.
  • Добавили класс .list-group-flush для использования с карточками.
  • Переписали этот компонент на флексбоксе.
  • С учетом вышеописанного перевода этих элементов на флексбокс, выравнивание смещенных иконок в заголовке, вероятно, будет нарушено, т.к. мы больше не используем float. Раньше контент, на котором применен float, стоял первым по порядку, но с флексбоксом это изменилось. Обновите ваши смещенные иконки так, чтобы они шли после заголовков модальных элементов.
  • Параметр remote (который можно было использовать для автоматической загрузки и инъекций внешнего контента в модальный элемент), и соответствующее событие loaded.bs.modal теперь удалены. Мы рекомендуем использовать вместо них шаблоны со стороны или фреймворк привязки данных; можно также вызвать jQuery.load.
  • Переписали этот компонент на флексбоксе.
  • Удалили почти все селекторы > для более простой стилизации посредством невложенных классов.
  • Вместо HTML-селекторов, таких как .nav > li > a теперь мы используем отдельные классы .navs, .nav-item и .nav-link. Это делает код HTML более гибким и одновременно «растяжимым».

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

  • «Отзывчивое» поведение этого элемента теперь применяется на класс .navbar через обязательный класс .navbar-expand-{breakpoint}, в котором вы выбираете, в какой момент свернуть панель навигации.
  • .navbar-default стал .navbar-light, хотя .navbar-dark остался прежним. Хотя бы один из этих классов обязателен в навбаре. Однако, эти классы больше не задают параметр background-color, а вместо этого работают с классом color.
  • Навбары теперь требуют объявления бэкграунда (в любом виде). Для этого пользуйтесь нашими классами-утилитами бэкграунда (.bg-*) или создайте свой собственный, используя классы «светлый\инверсивный», описанные выше, для создания классной настройки.
  • Учитывая наличие флексбокса, навбары теперь могут использовать утилиты флексбокса для легкой настройки выравнивания.
  • .navbar-toggle стал .navbar-toggler и получил различные стили и внутреннюю разметку (больше нет трех <span>ов).
  • Мы полностью убрали класс .navbar-form, т.к. он больше не нужен, вместо него используйте класс .form-inline.
  • В навбарах больше нет margin-bottom или border-radius по умолчанию. Используйте классы-утилиты по необходимости.
  • Все примеры с навбаром обновлены в новой разметке.

Нумерация страниц

  • Переписана на флексбоксе.
  • «Потомки» элементов класса .pagination теперь должны иметь классы .page-item и .page-link.
  • Полностью убран компонент класса .pager, т.к. он был всего лишь немного доработанным наброском кнопки.
  • «Потомки» элементов класса .breadcrumb теперь должны иметь класс .breadcrumb-item.

Лейблы и значки

  • Переименовали класс .label в .badge, чтобы не путать его с элементом <label>.
  • Убрали компонент .badge, т.к. он был почти идентичен лейблам. Для «закругленного» вида вместо него используйте модификатор .badge-pill с лейблом.
  • Значки больше не размещаются автоматически в группах списков и других компонентах. Для этого теперь требуются класс утилит.
  • Убрали .badge-default, а .badge-secondary теперь подходит к компонентам классов-модификаторов, используемых везде.

Панели, миниатюры и ячейки

Их мы убрали полностью ради нового компонента – карточки.

Панели

  • .panel стала .card, переписана на флексбоксе.
  • .panel-default удален без замены.
  • .panel-group удален без замены. .card-group - не замена, но отличается.
  • .panel-heading стал .card-header
  • .panel-title стал .card-title. В зависимости от предпочитаемого вида, вы можете также использовать заголовочные элементы или классы (т.е. <h3>, .h3) или «жирно» выделенные элементы или классы (т.е. <strong>, <b>, .font-weight-bold). Заметим, что класс .card-title при одинаковом названии, имеет вид, отличный от .panel-title.
  • .panel-body стал .card-body.
  • .panel-footer стал .card-footer.
  • .panel-primary, .panel-success, .panel-info, .panel-warning и .panel-danger убраны, на замену им пришли утилиты .bg-, .text- и .border, которые генерирует наша карта Sass $theme-colors.

Прогрессбары

  • Заменили контекстуальные классы .progress-bar-* на классы-утилиты .bg-*. К примеру, class="progress-bar progress-bar-danger" становится class="progress-bar bg-danger".
  • Заменили класс анимированных прогрессбаров .active на .progress-bar-animated.
  • Данный компонент пересмотрен в сторону упрощения дизайна и стилизации. Теперь в нем меньше стилей, которые «перебивают» другие, добавлены новые индикаторы и иконы.
  • Во всем CSS в данном элементе убраны вложенные элементы, а каждый класс получил префикс .carousel-.
    • Элементы карусели .next, .prev, .left и .right стали .carousel-item-next, .carousel-item-prev, .carousel-item-left и .carousel-item-right.
    • .item теперь стал .carousel-item.
    • Для элементов контроля «пред\след» классы .carousel-control.right и .carousel-control.left стали .carousel-control-next и .carousel-control-prev и теперь им не нужен специальный базовый класс.
  • Удалена вся «отзывчивая» стилизация, которая обращалась к классам-утилитам (например та, которая показывала подписи на определенном брейкпойнте) и стандартным стилям.
  • Удалены «перебивающие» переменные изображений в каруселях, которые ссылались на классы-утилиты.
  • «Подрегулирован» пример карусели – включена новые разметка и стили.

Таблицы

  • Удалена поддержка стилизованных вложенных таблиц. Все стили таблиц в Bootstrap теперь основаны на более простых селекторах.
  • Добавлен перевернутый вариант таблиц.

Утилиты

  • Display, hidden и другие параметры:
  • Тип:
    • Добавили отзывчивые варианты наших классов выравнивания текста - .text-{sm,md,lg,xl}-{left,center,right}.
  • Выравнивание и отступы:
  • «Clearfix» обновлен – из него убрана поддержка более старых версий браузеров.

Браузерные префиксы

Смешанные префиксы в Bootstrap 3, которые были объявлены устаревшими в v3.2.0, существовали, а в Bootstrap 4 удалены, т.к. Bootstrap использует Autoprefixer.

Удалены миксины: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Документация

Наша документация также обновилась по всем направлениям. Вот свод:

  • Мы все еще используем Jekyll, но в сочетании с плагинами:
    • bugify.rb используется для создания списка записей на нашей странице поиска багов в разных браузерах.
    • example.rb стандартный «форк» плагина по умолчанию highlight.rb, который позволяет облегчать создание блоков примеров код.
    • callout.rb стандартный «форк» одноименного плагина, но созданный для вызовов наших специальных документов.
    • jekyll-toc используется для создания таблиц с содержимым.
  • Все содержимое документации было переписано в «Markdown» (вместо HTML) для более легкого редактирования.
  • Страницы реорганизованы в связи с упрощением их содержимого и представлены в более понятной иерархии.
  • Bootstrap перешел с CSS на SCSS, что позволяет полностью использовать преимущества бутстрапа - переменные, миксины и т.д.

Отзывчивые утилиты

Все переменные @screen- удалены из Bootstrap. Используйте вместо них Sass миксины media-breakpoint-up(), media-breakpoint-down() или media-breakpoint-only() или карты Sass $grid-breakpoints.

Большинство наших отзывчивых классов – утилит удалено, на их место пришли утилиты display.

  • Классы .hidden и .show удалены, т.к. они конфликтовали с методами jQuery $(...).hide() и $(...).show(). Вместо них используйте изменение атрибута [hidden] или используйте вложенные стили, такие как style="display: none;" и style="display: block;".
  • Все классы .hidden- удалены ради утилит печати, которые также были переименованы.
    • Удалено из вер. 3: .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Удалено из альфа-версий 4: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Утилиты печати больше не начинаются с .hidden- или .visible-, а начинаются с .d-print-.
    • Старые названия: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
    • Новые классы: .d-print-block, .d-print-inline, .d-print-inline-block, .d-print-none

Для того, чтобы сделать элемент видимым, лучше просто не прятать его на данном размере экрана, а не использовать классы .visible-*. Можно сочетать один класс .d-*-none с одним .d-*-block, чтобы показать элемент лишь на данном интервале размеров экрана (например, .d-none.d-md-block.d-xl-none покажет элемент только на больших и средних девайсах).

Заметим, что изменения в брейкпойнтах сеток в версии 4 привели к тому, что теперь необходимо применять бОльший брейкпойнт (т.е. следующий в сторону увеличения от фактического нужного) для достижения тех же результатов. Новые отзывчивые классы-утилиты не работают в менее обычных случаях, например, когда видимость элемента не может быть выражена одиночным набором размеров области видимости, в таких случаях используйте обычный CSS.