Skip to main content Skip to docs navigation
Ver en GitHub

Posición (Position)

Utiliza estas utilidades abreviadas para configurar rápidamente la posición de un elemento.

En esta página

Valores de posición (Position values)

Las clases de posicionamiento rápido están disponibles, aunque no son responsivas.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Organizar elementos (Arrange elements)

Organiza los elementos fácilmente con las utilidades de posicionamiento de bordes. El formato es {property}-{position}.

Donde property es uno de:

  • top: para la posición vertical superior (top)
  • start: para la posición horizontal izquierda (left) (en LTR)
  • bottom: para la posición vertical inferior (bottom)
  • end: para la posición horizontal derecha (right) (en LTR)

Donde position es uno de:

  • 0: para la posición de borde 0
  • 50: para la posición de borde 50%
  • 100: para la posición de borde 100%

(Puedes agregar más valores de posición agregando entradas a la variable de mapa Sass $position-values.)

html 
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Centrar elementos (Center elements)

Además, también puedes centrar los elementos con la clase de utilidad de transformación .translate-middle.

Esta clase aplica las transformaciones translateX(-50%) and translateY(-50%) al elemento que, en combinación con las utilidades de posicionamiento de bordes, te permite centrar absolutamente un elemento.

html 
<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

Al agregar las clases .translate-middle-x o .translate-middle-y, los elementos se pueden posicionar solo en dirección horizontal o vertical.

html 
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Ejemplos

Aquí tienes algunos ejemplos de la vida real de estas clases:

Marcador
html 
<button type="button" class="btn btn-primary position-relative">
  Mensajes <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">mensajes no leídos</span></span>
</button>

<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
  Marcador <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>

<button type="button" class="btn btn-primary position-relative">
  Alertas <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">mensajes no leídos</span></span>
</button>

Puedes utilizar estas clases con componentes existentes para crear otros nuevos. Recuerda que puedes ampliar su funcionalidad agregando entradas a la variable $position-values.

html 
<div class="position-relative m-4">
  <div class="progress" role="progressbar" aria-label="Progreso" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar" style="width: 50%"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

CSS

Mapas Sass

Los valores predeterminados de la utilidad de posición se declaran en un mapa Sass, que luego se usa para generar nuestras utilidades.

scss/_variables.scss 
$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

API de utilidades de Sass

Las utilidades de posición se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss 
"position": (
  property: position,
  values: static relative absolute fixed sticky
),
"top": (
  property: top,
  values: $position-values
),
"bottom": (
  property: bottom,
  values: $position-values
),
"start": (
  property: left,
  class: start,
  values: $position-values
),
"end": (
  property: right,
  class: end,
  values: $position-values
),
"translate-middle": (
  property: transform,
  class: translate-middle,
  values: (
    null: translate(-50%, -50%),
    x: translateX(-50%),
    y: translateY(-50%),
  )
),