Видимость и оформление

Opacity

Прозрачность меняется шагами по десять процентов

opacity-10 … opacity-100. Responsive-форма: opacity-md-50; hover-форма без breakpoint: opacity-hover-80.

Radius

Скругление задаётся целиком или для одного угла

Значения: none, sm, md, lg, xl, 2xl, full. Префиксы: radius, radius-tl, radius-tr, radius-br, radius-bl. Например: radius-lg, radius-tl-none.

Visibility

Готовые классы описывают диапазон видимости

• .show-xs-onlyПоказывает блок только ниже 576 px.
• .hide-{bp}-upСкрывает начиная с указанного breakpoint.
• .hide-{bp}-downСкрывает до указанного breakpoint включительно.
• .show-{bp}-upПоказывает как block начиная с breakpoint.

{bp} — sm, md, lg, xl, xxl. Для другого display используйте комбинацию d-none d-md-flex.

Z layers

Z-index выбирается по роли интерфейса

z-base, z-raised, z-sticky, z-dropdown, z-overlay, z-modal, z-toast, z-tooltip.

Правило: не подбирайте случайное число z-index. Выберите роль слоя или пересмотрите структуру наложения.