Положение

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

Fixed top

Размещает элемент в верхней части окна просмотра, от края до края.

<div class="fixed-top">...</div>

Fixed bottom

Размещает элемент в нижней части окна просмотра, от края до края.

<div class="fixed-bottom">...</div>

Sticky top

Помещает элемент в верхней части экрана, но только после прокрутки. Модификатор .sticky-top использует CSS стиль position: sticky, который поддреживается не всеми браузерами.

<div class="sticky-top">...</div>

Абсолютное позиционирование

Имена классов присваиваются с использованием формата a{side}-{size} для xs и a{side}-{breakpoint}-{size} для sm, md, lg, и xl.

Где sides является одним из:

  • t - для top (верхней стороны)
  • b - для bottom (нижней стороны)
  • l - для left (левой стороны)
  • r - для right (правой стороны)

Где size является одним из:

  • 0 - смещение отсуствует.
  • 1 - смещение на .25 rem
  • 2 - смещение на .5 rem
  • 3 - смещение на 1 rem
  • 4 - смещение на 2 rem
  • 5 - смещение на 4 rem
  • 6 - смещение на 8 rem
  • 7 - смещение на 16 rem

Для отрицательного смещения вы можете использовать следующую конструкуию {a}{sides}--{size} для xs и {a}{sides}--{breakpoint}-{size} для sm, md, lg, и xl.