Skip to main content Skip to docs navigation
En GitHub

Posición

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

En esta página

Valores de posición

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

<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

Organiza 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 top
  • start - para la posición horizontal left (en LTR)
  • bottom - para la posición vertical bottom
  • end - para la posición horizontal right (en LTR)

Donde position es uno de:

  • 0 - para posición de borde 0
  • 50 - para posición de borde 50%
  • 100 - para posición de borde 100%

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

<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

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%) y translateY(-50%) al elemento que, en combinación con las utilidades de posicionamiento de bordes, te permite centrar un elemento de forma absoluta.

<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 colocar solo en dirección horizontal o vertical.

<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í hay algunos ejemplos de la vida real de estas clases:

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

<button type="button" class="btn btn-dark position-relative">
  Marcador <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><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>
</button>

<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 usar estas clases con componentes existentes para crear otros nuevos. Recuerda que puedes extender su funcionalidad agregando entradas a la variable $position-values.

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></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>

Sass

Mapas

Los valores de utilidad de posición predeterminados se declaran en un mapa Sass y luego se utilizan para generar nuestras utilidades.

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

API de utilidades

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

    "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%),
      )
    ),