Положение
Используйте эти помощники для быстрой настройки положения элемента.
Фиксация сверху
Располагайте элементы вверху области видимости, от края до края. Удостоверьтесь, что вы понимаете последствия фиксированной позиции в вашем проекте. Вам может потребоваться добавить дополнительные классы CSS.
<divclass="fixed-top">...</div>Фиксация внизу
Располагайте элементы у нижнего края видимости, от края до края. Удостоверьтесь, что вы понимаете последствия фиксированной позиции в вашем проекте. Вам может потребоваться добавить дополнительные классы CSS.
<divclass="fixed-bottom">...</div>«Липкий» верх
Позиционируйте элемент у верхнего края области видимости, от края до края, но только после того, как область видимости прокрутится после него. Класс .sticky-top использует position: sticky, который поддерживается не всеми браузерами.
<divclass="sticky-top">...</div>Адаптивный «липкий» верх
Адаптивные варианты также существуют для утилиты .sticky-top.
<divclass="sticky-sm-top">Придерживайтесь верхней части окна просмотра размером SM (маленький) или шире</div><divclass="sticky-md-top">Придерживайтесь верхней части окна просмотра размером MD (средний) или шире</div><divclass="sticky-lg-top">Придерживайтесь верхней части окна просмотра размером LG (большой) или шире</div><divclass="sticky-xl-top">Придерживайтесь верхней части окна просмотра размером XL (очень большой) или шире</div><divclass="sticky-xxl-top">Придерживайтесь верхней части окна просмотра размером XXL (огромный) или шире</div>«Липкий» низ
Поместите элемент в нижней части окна просмотра, от края до края, но только после того, как вы прокрутите его.
<divclass="sticky-bottom">...</div>Адаптивный «липкий» низ
Адаптивные варианты также существуют для утилиты .sticky-bottom.
<divclass="sticky-sm-bottom">Придерживайтесь нижней части окна просмотра размером SM (маленький) или шире</div><divclass="sticky-md-bottom">Придерживайтесь нижней части окна просмотра размером MD (средний) или шире</div><divclass="sticky-lg-bottom">Придерживайтесь нижней части окна просмотра размером LG (большой) или шире</div><divclass="sticky-xl-bottom">Придерживайтесь нижней части окна просмотра размером XL (очень большой) или шире</div><divclass="sticky-xxl-bottom">Придерживайтесь нижней части окна просмотра размером XXL (огромный) или шире</div>