Guía Bootstrap — Completa y Visual

⚡

¿Qué es Bootstrap?

La herramienta más usada del mundo para hacer páginas web bonitas

Bootstrap es una colección de estilos y componentes listos para usar creada por desarrolladores profesionales. En lugar de escribir todo el CSS tú mismo desde cero, simplemente agregas clases especiales a tu HTML y Bootstrap hace el diseño automáticamente. Piensa en Bootstrap como tener un librería gigante de diseño empaquetado: botones bonitos, formularios elegantes, barras de navegación responsivas, tarjetas profesionales, y mucho más. Todo funciona en cualquier dispositivo: computadora, tablet y celular.

Lo mejor es que no necesitas aprender CSS complicado. Solo aprendes a usar nombres de clases que Bootstrap ya preparó. Por ejemplo: en lugar de escribir 20 líneas de CSS para un botón bonito, solo escribes class="btn btn-primary".

💡 Piénsalo como tener un diseñador ya incluido: escribes el código y Bootstrap lo hace profesional automáticamente.

📦

Instalación — sin instalar nada

Solo 2 líneas de código y ya tienes Bootstrap funcionando

1

Copia este link dentro del <head>

Esto descarga todos los estilos CSS de Bootstrap desde internet. El <head> es la sección invisible de tu página donde van las configuraciones.

<link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

2

Copia este script antes del </body>

Esto carga el código JavaScript de Bootstrap que hace que funcionen cosas interactivas como menús desplegables, ventanas emergentes (modales), carruseles y tooltips. Va al final para que la página cargue más rápido.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

✅ ¡Listo! Sin descargas, sin npm, sin nada complicado. Solo pega esas dos líneas y funciona.

🗺️

¿Cómo funciona Bootstrap?

El secreto está en las clases CSS

Bootstrap funciona a través de clases CSS especiales. Tú escribes HTML normal, y al agregarle ciertas clases Bootstrap aplica estilos automáticamente. Todas esas clases ya están escritas y probadas por miles de desarrolladores en todo el mundo. bootstrap tiene nombres de clases predefinidos como btn, container, row, col, y muchas más.

<!-- Sin Bootstrap (feo, sin estilo) -->
<button>Haz clic</button>

<!-- Con Bootstrap (bonito, con color) -->
<button class="btn btn-primary">Haz clic</button>

⚠️ La única diferencia es class="btn btn-primary" — eso es todo lo que hace Bootstrap: aplicar estilos a través de clases.

📄

Plantilla base completa

Copia esto como punto de partida para cualquier página nueva

Esta es la estructura mínima que necesita toda página web: la declaración DOCTYPE (qué tipo de documento es), el idioma establecido a español, las metaetiquetas obligatorias, Bootstrap importado, y tu contenido en el body. Simplemente copia esto y reemplaza \"Mi Página\" y el contenido.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi Página</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>

  <!-- ✏️ Tu contenido va aquí -->

  <!-- Bootstrap JS (al final, para que cargue rápido) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

⚠️ El meta viewport es obligatorio — sin él tu página se ve horrible en celulares.

📦

El container: el contenedor de todo

Todo tu contenido debe ir dentro de un container

El container es una caja invisible que centra tu contenido y le agrega márgenes a los lados (solo en pantallas grandes). Piénsalo como la "hoja" o "papel" sobre el cual escribes todo tu contenido. Sin container, tu texto se vería pegado a los bordes de la pantalla. El container automáticamente se adapta: en celulares es ancho completo, en tablets es más pequeño, y en computadoras se centra.

Tipo A — container con márgenes (recomendado)

<div class="container">
  <!-- Contenido centrado, con márgenes laterales bonitos -->
  <!-- Perfecto para artículos, servicios, y contenido normal -->
  Mi contenido aquí
</div>

Tipo B — container-fluid (ancho completo)

<div class="container-fluid">
  <!-- Ocupa el 100% del ancho de la pantalla -->
  <!-- Ideal para barras de navegación, heroes, y secciones que van de borde a borde -->
  Contenido de ancho total sin márgenes laterales
</div>

💡 Regla práctica: usa container para el 90% de tu página. Solo usa container-fluid para elementos que necesitan llegar hasta el borde (como la barra de navegación). Container hace tu página más legible porque el texto no ocupa ancho completo.

⬛

El sistema de columnas (Grid)

Bootstrap divide la pantalla en 12 columnas invisibles

Piénsalo como una regla dividida en 12 partes iguales. Tú decides cuántas partes ocupa cada elemento. La regla es simple: los números dentro de una fila deben sumar 12. Por ejemplo, si quieres 3 columnas iguales, usas col-4 col-4 col-4 (4+4+4=12). Si quieres una barra lateral y contenido principal, usas col-3 para la barra y col-9 para el contenido (3+9=12).

Vista previa de columnas

col-4

col-6

col-8

col-4

col-12

✍️

La estructura siempre es la misma

container → row → col

📌 Regla de oro: container (la página) contiene row (una fila) que contiene col (las columnas).

<div class="container">    <!-- La página -->
  <div class="row">           <!-- Una fila -->

    <div class="col-4">      <!-- Columna izquierda (4/12) -->
      Menú lateral
    </div>

    <div class="col-8">      <!-- Columna derecha (8/12) -->
      Contenido principal
    </div>

  </div>
</div>

📱

Responsive: se adapta al tamaño de pantalla

Diferentes columnas según el dispositivo, sin JS

Agrega un prefijo al nombre de la columna para indicar a partir de qué tamaño de pantalla aplica ese ancho. Esto se llama responsive design. Sin estos prefijos, tus columnas se romperían en celulares. Con ellos, tu página se adapta automáticamente: en celular puede ser una columna, en tablet dos columnas, y en computadora tres columnas, todo con una sola línea de código.

Clase	Cuándo aplica
col-12	Celular: siempre (100% del ancho)
col-sm-6	Celular grande: 576px o más (50%)
col-md-6	Tablet: 768px o más (50%)
col-lg-4	Escritorio: 992px o más (33%)
col-xl-3	Pantalla grande: 1200px o más (25%)

<!-- En celular: ancho completo.
     En tablet: 2 columnas.
     En computador: 3 columnas. -->
<div class="col-12 col-md-6 col-lg-4">
  Este elemento se adapta solo
</div>

✅ Puedes combinar varios prefijos en la misma clase. Bootstrap usará el que corresponda al tamaño actual de la pantalla.

↔️

Espacio entre columnas (gutter)

Agrega separación entre columnas con una clase al row

El \"gutter\" es el espacio entre columnas. Por defecto hay poco espacio, pero puedes controlarlo con clases g-1 a g-5 en el row. g-4 es el más común y recomendado para dar un espaciado profesional.

<!-- g-4 agrega espacio entre todas las columnas -->
<div class="row g-4">
  <div class="col-md-6">Columna 1</div>
  <div class="col-md-6">Columna 2</div>
</div>

🔘

Botones

Diferentes estilos con solo cambiar una clase

Los botones son elementos interactivos que comunican acciones. Bootstrap proporciona 6 colores diferentes, cada uno con significado: azul para acciones normales, verde para éxito, rojo para peligro, amarillo para advertencias, oscuro para fondo, y versiones con borde (outline) para acciones secundarias.

btn-primary (acción principal)

btn-success (completado)

btn-danger (eliminar)

btn-warning (atención)

btn-dark (secundario)

btn-outline-primary (borde)

<button class="btn btn-primary">Enviar</button>
<button class="btn btn-success">Guardar</button>
<button class="btn btn-danger">Eliminar</button>
<button class="btn btn-warning">Atención</button>
<button class="btn btn-outline-primary">Ver más</button>

<!-- Tamaños -->
<button class="btn btn-primary btn-lg">Grande</button>
<button class="btn btn-primary btn-sm">Pequeño</button>
<button class="btn btn-primary w-100">Ancho completo</button>

⚠️

Alertas

Mensajes con color según el tipo de información

Las alertas son mensajes que comunican información importante al usuario. Cada color tiene un significado: azul para información, verde para éxito, amarillo para advertencias, y rojo para errores. Sirven para dar retroalimentación sobre acciones del usuario.

ℹ️ Esto es un mensaje informativo (para datos útiles).

✅ La operación fue exitosa (formulario enviado).

⚠️ Atención, revisa este dato (completar campos).

❌ Ocurrió un error inesperado (intenta de nuevo).

<div class="alert alert-info">Información</div>
<div class="alert alert-success">Éxito</div>
<div class="alert alert-warning">Advertencia</div>
<div class="alert alert-danger">Error</div>

🃏

Cards (tarjetas)

Contenedores elegantes para mostrar información agrupada

Las tarjetas son componentes visuales que agrupan información relacionada de forma elegante. Cada tarjeta es como una \"nota pegada\" en tu página. Perfecto para portfolios, productos, servicios, testimonios, o cualquier contenido que quieras destacar. Las tarjetas pueden incluir imágenes, títulos, descripciones y botones.

Título de la tarjeta

Esta es la descripción del contenido dentro de la tarjeta. Puede incluir texto, imágenes y botones.

<div class="card">
  <img src="imagen.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título</h5>
    <p  class="card-text">Descripción del contenido.</p>
    <a  href="#" class="btn btn-primary">Ver más</a>
  </div>
</div>

📝

Formularios

Campos de texto, selects y checkboxes con estilo moderno

Los formularios son la forma de recopilar información de los usuarios. Bootstrap proporciona estilos bonitos para entrada de texto, emails, áreas de texto, opciones múltiples (checkboxes), botones de radio, y más. Siempre usa form-label para las etiquetas y form-control para los campos. La clase mb-3 agrega espacio entre los campos.

<!-- Campo de texto -->
<div class="mb-3">
  <label class="form-label">Tu nombre</label>
  <input type="text" class="form-control" placeholder="Ej: Ana García">
</div>

<!-- Correo electrónico -->
<div class="mb-3">
  <label class="form-label">Correo electrónico</label>
  <input type="email" class="form-control" placeholder="ana@correo.com">
</div>

<!-- Lista desplegable (select) -->
<div class="mb-3">
  <label class="form-label">País</label>
  <select class="form-select">
    <option>Chile</option>
    <option>Argentina</option>
  </select>
</div>

<!-- Área de texto -->
<div class="mb-3">
  <label class="form-label">Mensaje</label>
  <textarea class="form-control" rows="4"></textarea>
</div>

<!-- Checkbox -->
<div class="form-check mb-3">
  <input class="form-check-input" type="checkbox">
  <label class="form-check-label">Acepto los términos</label>
</div>

<button class="btn btn-primary">Enviar formulario</button>

🧭

Navbar (barra de navegación)

Menú superior que colapsa en un ícono hamburguesa en celulares

La barra de navegación es lo primero que ven los usuarios. Bootstrap incluye una navbar responsiva que se adapta automáticamente: en computadora muestra todos los links horizontales, en celular se colapsa en un menú hamburguesa. Es interactiva gracias al JavaScript que incluimos. Usa navbar-brand para tu logo o nombre del sitio.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- Nombre/logo del sitio -->
    <a class="navbar-brand" href="#">Mi Sitio</a>

    <!-- Botón hamburguesa (solo en celular) -->
    <button class="navbar-toggler" data-bs-toggle="collapse"
            data-bs-target="#miMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links del menú -->
    <div class="collapse navbar-collapse" id="miMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

📊

Tablas

Tablas con estilos limpios y rayadas al instante

Las tablas son perfectas para mostrar datos organizados. Bootstrap automáticamente agrega bordes, relleno, y colores alternados en las filas (rayadas) para que sean fáciles de leer. table es la clase base, table-striped agrega rayadas, y table-hover hace que las filas cambien de color al pasar el cursor.

<table class="table table-striped table-hover">
  <thead class="table-dark">
    <tr>
      <th>Nombre</th>
      <th>Ciudad</th>
      <th>País</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana García</td>
      <td>Santiago</td>
      <td>Chile</td>
    </tr>
    <tr>
      <td>Luis Torres</td>
      <td>Lima</td>
      <td>Perú</td>
    </tr>
  </tbody>
</table>

📐

Flexbox en Bootstrap

Para alinear y distribuir elementos sin escribir CSS propio

Flexbox es la forma moderna de controlar la posición de los elementos. Sin Flexbox, alinear cosas era complicado. Con Bootstrap solo necesitas agregar clases, no código CSS. Flexbox es especialmente útil para: centrar cosas perfectamente, distribuir espacio entre elementos, hacer que componentes se adapten automáticamente, y crear menús y barras de herramientas bonitas.

Centrar horizontalmente

A

B

C

<div class="d-flex justify-content-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Espacio entre elementos

Izquierda

Centro

Derecha

<div class="d-flex justify-content-between">...</div>

Centrado total (horizontal + vertical)

Centrado total

<div class="d-flex justify-content-center align-items-center"
     style="height: 200px">
  Esto queda en el centro exacto
</div>

📋

Referencia de clases Flexbox

Las más usadas en el día a día

Clase	Qué hace
d-flex	Activa flexbox en el contenedor
justify-content-center	Centra los hijos horizontalmente
justify-content-between	Distribuye con espacio entre cada hijo
justify-content-end	Empuja los hijos a la derecha
align-items-center	Centra los hijos verticalmente
align-items-start	Alinea los hijos arriba
align-items-end	Alinea los hijos abajo
flex-column	Apila los hijos en vertical (como lista)
flex-wrap	Permite que los hijos salten a la siguiente línea
gap-1 a gap-5	Espacio entre los elementos hijos

↕️

Espaciado: margin y padding

Controla el espacio exterior e interior sin escribir CSS

El espaciado es crucial para que tu página se vea profesional. Margin es el espacio exterior (afuera de la caja) y padding es el espacio interior (adentro de la caja). La fórmula es: propiedad + lado + tamaño. Ejemplo: mt-3 = margin-top (arriba) tamaño 3.

Clase	Qué hace
m-3	margin en todos los lados (tamaño 3)
mt-4	margin-top tamaño 4
mb-2	margin-bottom tamaño 2
ms-3	margin-start (izquierda) tamaño 3
me-3	margin-end (derecha) tamaño 3
mx-auto	margin izq y der en auto → centra el elemento
my-5	margin arriba y abajo tamaño 5
p-3	padding en todos lados tamaño 3
pt-4	padding-top tamaño 4
pb-2	padding-bottom tamaño 2
px-4	padding izquierda y derecha tamaño 4
py-5	padding arriba y abajo tamaño 5

📌 Los tamaños van del 0 al 5. El 0 elimina el espacio por completo, el 5 es el espacio más grande. El 3 es el tamaño medio y el más común.

🔤

Tipografía y texto

Clases para controlar fuentes, tamaños y alineación

Bootstrap proporciona clases para cambiar cómo se ve el texto sin escribir CSS. Puedes centrar, alinear a derecha, hacer negrita, itálica, cambiar tamaños (de muy pequeño a muy grande), y cambiar colores. Es especialmente útil para títulos, subtítulos, textos muted (apagados), y destacar información importante con colores.

Clase	Qué hace
text-center	Centra el texto
text-start	Alinea el texto a la izquierda
text-end	Alinea el texto a la derecha
fw-bold	Texto en negrita
fw-normal	Peso de fuente normal
fst-italic	Texto en cursiva
fs-1	Tamaño muy grande (h1)
fs-3	Tamaño mediano
fs-6	Tamaño pequeño
text-muted	Texto en gris apagado
text-primary	Texto en azul
text-success	Texto en verde
text-danger	Texto en rojo
text-warning	Texto en amarillo

🎨

Colores de fondo

Aplica color a cualquier elemento con una clase

Bootstrap tiene 7 colores predefinidos de fondo que puedes aplicar a cualquier elemento. Cada color tiene un propósito visual: azul para primario, verde para éxito, rojo para peligro, amarillo para advertencia, cian para información, blanco claro para fondos neutros, y oscuro para contraste. Combinados con texto blanco o negro, se ven profesionales.

bg-primary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

<div class="bg-primary text-white p-3">Fondo azul</div>
<div class="bg-success text-white p-3">Fondo verde</div>
<div class="bg-danger  text-white p-3">Fondo rojo</div>
<div class="bg-dark    text-white p-3">Fondo negro</div>
<div class="bg-light            p-3">Fondo gris claro</div>

👁️

Mostrar y ocultar elementos

Controla la visibilidad según el dispositivo

Usa estas clases para mostrar o ocultar elementos según el tamaño de pantalla. Por ejemplo, puedes mostrar un menú completo en computadora pero ocultarlo en celular, o mostrar un botón especial solo para móviles. d-none esconde cualquier cosa, y d-md-block la muestra solo en tablet en adelante.

Clase	Qué hace
d-none	Oculta el elemento en todos los tamaños
d-block	Muestra el elemento como bloque
d-none d-md-block	Oculto en celular, visible en tablet y más
d-md-none	Visible en celular, oculto en tablet y más
d-flex	Muestra como flexbox
d-inline	Muestra en línea (como texto)
d-inline-block	Mezcla de inline y block

<!-- Solo visible en celulares -->
<div class="d-block d-md-none">
  Solo se ve en celulares
</div>

<!-- Solo visible en tablet y escritorio -->
<div class="d-none d-md-block">
  Solo se ve en pantallas grandes
</div>

📏

Ancho y alto

Controla las dimensiones sin CSS

Control el tamaño de elementos de forma rápida. w-100 es el más común: hace que un botón ocupe el ancho completo del contenedor. mw-100 es perfecto para imágenes porque nunca crecen más allá de su tamaño original. Estos valores son en porcentajes, así que son flexibles.

Clase	Qué hace
w-25	Ancho del 25% del contenedor (un cuarto)
w-50	Ancho del 50% (la mitad)
w-75	Ancho del 75% (tres cuartos)
w-100	Ancho del 100% (ocupa todo el ancho disponible)
h-100	Alto del 100% del contenedor padre
mw-100	Ancho máximo del 100% (ideal para imágenes responsivas)

🌐

Página web completa lista para usar

Combina todo lo aprendido: navbar, hero, tarjetas, formulario y footer

✅ Este es un ejemplo profesional y completamente funcional. Copia este código completo, pégalo en un archivo con extensión .html, ábrelo en tu navegador y tendrás una página web completa y responsiva funcionando al instante. Es un excelente punto de partida para tu propio sitio web.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi Primera Página Web</title>
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>

  <!-- ================================================
       NAVBAR — Barra de navegación superior
  ================================================ -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Mi Empresa</a>
      <button class="navbar-toggler"
              data-bs-toggle="collapse"
              data-bs-target="#menu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Inicio</a></li>
          <li class="nav-item"><a class="nav-link"        href="#">Servicios</a></li>
          <li class="nav-item"><a class="nav-link"        href="#">Contacto</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- ================================================
       HERO — Sección de bienvenida
  ================================================ -->
  <div class="bg-primary text-white py-5 text-center">
    <div class="container py-4">
      <h1 class="display-4 fw-bold">Bienvenido a mi página</h1>
      <p class="fs-5 mt-3 mb-4">Aquí va la descripción de lo que ofreces.</p>
      <a href="#" class="btn btn-light btn-lg me-2">Empezar ahora</a>
      <a href="#" class="btn btn-outline-light btn-lg">Saber más</a>
    </div>
  </div>

  <!-- ================================================
       TARJETAS — Sección de servicios
  ================================================ -->
  <div class="container my-5">
    <h2 class="text-center mb-4">Nuestros servicios</h2>
    <div class="row g-4">
      <div class="col-12 col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">Servicio 1</h5>
            <p  class="card-text text-muted">Descripción breve del servicio.</p>
            <a  href="#" class="btn btn-primary">Ver más</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">Servicio 2</h5>
            <p  class="card-text text-muted">Descripción breve del servicio.</p>
            <a  href="#" class="btn btn-primary">Ver más</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">Servicio 3</h5>
            <p  class="card-text text-muted">Descripción breve del servicio.</p>
            <a  href="#" class="btn btn-primary">Ver más</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ================================================
       FORMULARIO — Sección de contacto
  ================================================ -->
  <div class="bg-light py-5">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-6">
          <h2 class="text-center mb-4">Contáctanos</h2>
          <div class="mb-3">
            <label class="form-label">Nombre</label>
            <input type="text" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label">Correo electrónico</label>
            <input type="email" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label">Mensaje</label>
            <textarea class="form-control" rows="4"></textarea>
          </div>
          <button class="btn btn-primary w-100">Enviar mensaje</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ================================================
       FOOTER — Pie de página
  ================================================ -->
  <footer class="bg-dark text-white text-center py-4">
    <div class="container">
      <p class="mb-0">
        &copy; 2025 Mi Empresa. Todos los derechos reservados.
      </p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🗺️

Mapa mental: estructura de la página

Cómo se organiza visualmente el proyecto

Cada sección del proyecto usa clases Bootstrap específicas para lograr su objetivo visual. Estudia esta tabla para entender cómo Bootstrap resuelve problemas comunes de diseño. La navbar es especial porque necesita expandirse/contraerse, el hero necesita ser llamativo, las tarjetas necesitan espaciado, el formulario necesita estar centrado, y el footer necesita estar al fondo.

Bloque	Clase Bootstrap usada
Navbar	navbar navbar-expand-lg navbar-dark bg-dark
Sección hero	bg-primary text-white py-5 text-center
Contenedor del hero	container py-4
Sección tarjetas	container my-5
Fila de tarjetas	row g-4
Columna adaptable	col-12 col-md-4
Sección formulario	bg-light py-5
Formulario centrado	row justify-content-center + col-md-6
Footer	bg-dark text-white text-center py-4