Tema 4 · Alineación y Offset

Alineación, Desplazamiento y Orden en Grid

Aprende a alinear columnas vertical y horizontalmente en la fila, desplazar columnas vacías con offset y reordenar visualmente elementos sin alterar el HTML.

El Sistema de Rejilla de 12 Columnas Tipografía, Encabezados Display y Párrafos

Alineación en Filas con Clases Flex Integradas

Dado que las filas .row son contenedores Flexbox nativos, puedes usar utilidades de alineación directamente sobre ellas:

Eje Clases Disponibles Efecto Visual
Vertical (Eje cruzado) .align-items-start
.align-items-center
.align-items-end		 Alinea todas las columnas arriba, al centro vertical o al fondo de la fila.
Horizontal (Eje principal) .justify-content-center
.justify-content-between
.justify-content-end		 Centra las columnas o las separa uniformemente si no suman 12 columnas completas.

Desplazamiento de Columnas: Clases offset-*

Para dejar un espacio en blanco a la izquierda de una columna (por ejemplo, para centrar un formulario de 6 columnas en una fila de 12), usamos .offset-*: 

<!-- Desplaza 3 columnas a la izquierda: 3 de vacío + 6 de ancho + 3 sobrantes = 12 centrado -->
<div class="row">
  <div class="col-md-6 offset-md-3">
    Formulario Centrado Perfectamente
  </div>
</div>

Reordenamiento Visual con order-*

  • .order-first: Fuerza a la columna a aparecer de primera visualmente.
  • .order-last: Fuerza a la columna a aparecer de última.
  • .order-1 a .order-5: Asigna prioridades numéricas de orden flex. Muy útil para mostrar primero la imagen en móviles y a la derecha en escritorios (order-md-2).

⚡ Centrado con Offset y Reordenamiento Visual de Columnas

Observa cómo el formulario central se posiciona con offset-md-3 y la segunda fila reordena visualmente los elementos con order-first y order-last:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alineación y Offset en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container">
    <!-- 1. Tarjeta centrada con offset-md-3 -->
    <div class="row mb-4">
      <div class="col-12 col-md-6 offset-md-3">
        <div class="card shadow-sm border-0 rounded-4 text-center p-4 bg-white">
          <span class="badge bg-primary-subtle text-primary fw-bold mb-2 align-self-center px-3 py-1 rounded-pill">
            col-md-6 offset-md-3
          </span>
          <h4 class="fw-bold text-dark">Panel Centrado con Offset</h4>
          <p class="text-secondary small mb-3">
            Al desplazarse 3 columnas en una fila de 12, esta caja de 6 columnas queda perfectamente equilibrada en pantallas medianas y grandes.
          </p>
          <button class="btn btn-primary px-4 rounded-pill">Entrar &raquo;</button>
        </div>
      </div>
    </div>

    <!-- 2. Reordenamiento visual con order-first / order-last -->
    <h5 class="fw-bold mb-3">Reordenamiento con order-*</h5>
    <div class="row g-2 text-center text-white">
      <div class="col-md-4 order-md-last">
        <div class="p-3 bg-danger rounded-3">
          1º en HTML &rarr; <span class="badge bg-white text-danger">order-md-last (Último visual)</span>
        </div>
      </div>
      <div class="col-md-4 order-md-2">
        <div class="p-3 bg-secondary rounded-3">
          2º en HTML &rarr; <span class="badge bg-white text-dark">order-md-2 (Centro)</span>
        </div>
      </div>
      <div class="col-md-4 order-md-first">
        <div class="p-3 bg-success rounded-3">
          3º en HTML &rarr; <span class="badge bg-white text-success">order-md-first (Primero visual)</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.