Skip to main content Skip to docs navigation

Posición (Position)

Utiliza estos ayudantes (helpers) para configurar rápidamente la posición de un elemento.

Superior fijo (Fixed top)

Posiciona un elemento en la parte superior de la ventana gráfica (viewport), de borde a borde. Asegúrate de comprender las ramificaciones de la posición fija en tu proyecto; es posible que debas agregar CSS adicional.

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

Inferior fijo (Fixed bottom)

Posiciona un elemento en la parte inferior de la ventana gráfica (viewport), de borde a borde. Asegúrate de comprender las ramificaciones de la posición fija en tu proyecto; es posible que debas agregar CSS adicional.

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

Superior pegajoso (Sticky top)

Posiciona un elemento en la parte superior de la ventana gráfica (viewport), de borde a borde, pero solo después de desplazarte más allá de él.

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

Superior pegajoso responsivo

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

<div class="sticky-sm-top">Se adhiere a la parte superior en ventanas gráficas de tamaño SM (pequeño) o superior</div>
<div class="sticky-md-top">Se adhiere a la parte superior en ventanas gráficas de tamaño MD (mediano) o superior</div>
<div class="sticky-lg-top">Se adhiere a la parte superior en ventanas gráficas de tamaño LG (grande) o superior</div>
<div class="sticky-xl-top">Se adhiere a la parte superior en ventanas gráficas de tamaño XL (extragrande) o superior</div>
<div class="sticky-xxl-top">Se adhiere a la parte superior en ventanas gráficas de tamaño XXL (extra-extragrande) o superior</div>

Inferior pegajoso (Sticky bottom)

Posiciona un elemento en la parte inferior de la ventana gráfica (viewport), de borde a borde, pero solo después de desplazarte más allá de él.

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

Inferior pegajoso responsivo

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

<div class="sticky-sm-bottom">Se adhiere a la parte inferior en ventanas gráficas de tamaño SM (pequeño) o superior</div>
<div class="sticky-md-bottom">Se adhiere a la parte inferior en ventanas gráficas de tamaño MD (mediano) o superior</div>
<div class="sticky-lg-bottom">Se adhiere a la parte inferior en ventanas gráficas de tamaño LG (grande) o superior</div>
<div class="sticky-xl-bottom">Se adhiere a la parte inferior en ventanas gráficas de tamaño XL (extragrande) o superior</div>
<div class="sticky-xxl-bottom">Se adhiere a la parte inferior en ventanas gráficas de tamaño XXL (extra-extragrande) o superior</div>