Positie

Gebruik deze helpers om snel de positie van een element te configureren.

Op deze pagina

Vaste top

Plaats een element bovenaan de viewport, van rand tot rand. Zorg ervoor dat u de gevolgen van een vaste positie in uw project begrijpt; het kan nodig zijn om extra CSS toe te voegen.

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

Vaste bodem

Plaats een element onderaan de viewport, van rand tot rand. Zorg ervoor dat u de gevolgen van een vaste positie in uw project begrijpt; het kan nodig zijn om extra CSS toe te voegen.

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

plakkerige bovenkant

Plaats een element bovenaan de viewport, van rand tot rand, maar pas nadat u er voorbij bent gescrold.

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

Responsieve plakkerige top

Responsieve variaties bestaan ook voor .sticky-topnut.

<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>

Kleverige bodem

Plaats een element aan de onderkant van de viewport, van rand tot rand, maar pas nadat u er voorbij bent gescrold.

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

Responsieve plakkerige bodem

Responsieve variaties bestaan ook voor .sticky-bottomnut.

<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>