Bootstrap
5.3
Ayudantes
Posición

Posición

Usa estos ayudantes para configurar rápidamente la posición de un elemento.

Curso de JavaScript

Fijo parte superior

Coloca un elemento en la parte superior del viewport, de borde a borde. Asegúrate de comprender las ramificaciones de la posición fija en tu proyecto; es posible que necesites agregar CSS adicional.

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

Fijo parte inferior

Coloca un elemento en la parte inferior del viewport, de borde a borde. Asegúrate de comprender las ramificaciones de la posición fija en tu proyecto; es posible que necesites agregar CSS adicional.

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

Pegajoso parte superior

Coloca un elemento en la parte superior del viewport, de borde a borde, pero solo después de pasarlo.

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

Pegajoso responsive superior

También existen variaciones responsive para la utilidad .sticky-top.

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

Pegajoso parte inferior

Coloca un elemento en la parte inferior del viewport, de borde a borde, pero solo después de pasarlo.

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

Pegajoso responsive inferior

También existen variaciones responsive para la utilidad .sticky-bottom.

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