Положение

Используйте эти помощники для быстрой настройки положения элемента.

На этой странице

Фиксация вверху

Расположите элемент в верхней части окна просмотра, от края до края. Убедитесь, что вы понимаете последствия фиксированной позиции в вашем проекте; вам может потребоваться добавить дополнительный CSS.

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

Фиксация внизу

Поместите элемент в нижней части окна просмотра, от края до края. Убедитесь, что вы понимаете последствия фиксированной позиции в вашем проекте; вам может потребоваться добавить дополнительный CSS.

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

Закреплено вверху

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

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

Отзывчиво закреплено вверху

Адаптивные варианты также существуют для утилиты .sticky-top.

<div class="sticky-sm-top">Придерживайтесь верхней части окна просмотра размером SM (маленький) или шире</div>
<div class="sticky-md-top">Придерживайтесь верхней части окна просмотра размером MD (средний) или шире</div>
<div class="sticky-lg-top">Придерживайтесь верхней части окна просмотра размером LG (большой) или шире</div>
<div class="sticky-xl-top">Придерживайтесь верхней части окна просмотра размером XL (очень большой) или шире</div>
<div class="sticky-xxl-top">Придерживайтесь верхней части окна просмотра размером XXL (огромный) или шире</div>

Закреплено внизу

Поместите элемент в нижней части окна просмотра, от края до края, но только после того, как вы прокрутите его.

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

Отзывчиво закреплено внизу

Адаптивные варианты также существуют для утилиты .sticky-bottom.

<div class="sticky-sm-bottom">Придерживайтесь нижней части окна просмотра размером SM (маленький) или шире</div>
<div class="sticky-md-bottom">Придерживайтесь нижней части окна просмотра размером MD (средний) или шире</div>
<div class="sticky-lg-bottom">Придерживайтесь нижней части окна просмотра размером LG (большой) или шире</div>
<div class="sticky-xl-bottom">Придерживайтесь нижней части окна просмотра размером XL (очень большой) или шире</div>
<div class="sticky-xxl-bottom">Придерживайтесь нижней части окна просмотра размером XXL (огромный) или шире</div>