Posisi

Gunakan helper ini untuk mengonfigurasi posisi elemen dengan cepat.

Di halaman ini

Atasan tetap

Posisikan elemen di bagian atas viewport, dari ujung ke ujung. Pastikan Anda memahami konsekuensi dari posisi tetap dalam proyek Anda; Anda mungkin perlu menambahkan CSS tambahan.

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

Bagian bawah tetap

Posisikan elemen di bagian bawah viewport, dari ujung ke ujung. Pastikan Anda memahami konsekuensi dari posisi tetap dalam proyek Anda; Anda mungkin perlu menambahkan CSS tambahan.

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

Atasan lengket

Posisikan elemen di bagian atas viewport, dari ujung ke ujung, tetapi hanya setelah Anda menggulir melewatinya.

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

Atasan lengket responsif

Variasi responsif juga ada untuk .sticky-toputilitas.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>

Bagian bawah lengket

Posisikan elemen di bagian bawah viewport, dari ujung ke ujung, tetapi hanya setelah Anda menggulir melewatinya.

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

Bagian bawah lengket yang responsif

Variasi responsif juga ada untuk .sticky-bottomutilitas.

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>